html页面中拍照和上传照片那些事儿（一）cnzt

一步，两步，三步，四步，五六七八九十步

一.思路：

二.原始效果：

该标签在页面的原始效果如下（选择文件按钮），PC端点击会出现图片选择对话框。这里没有添加任何css代码，很丑。没关系，我们的案例中会做个漂亮一点点的~PCchrome（其他效果差不多）：

iOSsafari：

Android:

并没有。。。。。。安卓手机

三.兼容性：

PCbrowsers--选择本地图片

iOS--可以从图库选择或者拍照

Android--可以选择图库或者文件管理。一句话，安卓之大，无奇不有，各种文件目录啊。。。

补充20170421：安卓的拍照功能可以通过app端改变接口实现。

四.用法：

1document.getElementById("imgUpload").onchange=function(e){2console.log(e);3varfile=e.target.files[0];45console.log(file);6}ViewCodeonchange--input内容改变是触发，即重新选择新的文件。

e--onchange事件的参数，指向change事件，这里我们使用它的target属性。结构如下：

五.上传图片：

上传图片利用formdata，通过newFormdata(formdom)来获取formdata，结合ajax上传server

1//html代码234567//js代码8vardata=newFormData(document.getElementById("formId"));9$.ajax({10url:url_send,11headers:url_headers,12data:data,13type:"post",14contentType:false,15processData:false,16success:function(data){17//18},19error:function(data){20//21}22});ViewCode注意：contentType:false,processData:false--这两个参数规定发送数据不用编码，禁止将data装换为请求字符串格式。

1.先上效果图，包括图片发送成功和失败的效果：

2.实现：

2.1页面布局

前面说过了，fileinput默认样式很丑的，如何做成我们效果图上的样子呢，方法很多，我这里是将input设置宽高和透明度，以及将它定位到“图片”和“相机”的上层，超级简单无bug。

2.2事件绑定

绑定onchange，该拿e拿e，该拿file拿file，见第四点。

2.3图片添加到对话框

我们采用dataurl的方式添加要发送的图片。怎么将img图片转成dataurl形式呢，方法也很多，我们用FileReader。上代码：

1varreader=newFileReader();2varimgDom;3vardataUrl;4reader.onload=function(e){5imgItem=document.createElement('img');6dataUrl=e.target.result;78//Androidfix9if(isAndroid()&&dataUrl.indexOf("data:image/")!=0){10dataUrl=dataUrl.replace("base64,","image/"+file.type.split("/").pop()+";base64,");11}1213$(imgDom).attr('src',dataUrl);1415//拼接dom16varappendHTML=''+17''+18'