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

本文为原创，转载请注明出处： cnzt  文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/6709037.html 

一. 思路：

　<input type="file" accept="image/*" id="imgUpload" />

二. 原始效果：

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

　　PC chrome（其他效果差不多）：

　　

　　iOS safari：

　　

　　Android:

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

三. 兼容性：

　PC browsers -- 选择本地图片

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

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

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

四. 用法：

 　document.getElementById("imgUpload").onchange = function(e){
 　　　console.log(e);
 　　　var file = e.target.files[0];

 　　　console.log(file );
 　}

　onchange -- input内容改变是触发，即重新选择新的文件。

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

　　

　file -- e.target.files[0] -- input标签中的文件对象，包含文件的修改时间，尺寸，类型及文件名，结构如下：

　　

五. 上传图片：

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

 //html代码
 <form action="" id="formId">
     <input type="file" name="image" accept="images/*" id="CameraUplBtn" capture="camera" />
 </form>

 //js代码
 var data = new FormData(document.getElementById("formId"));
 $.ajax({
     url: url_send,
     headers: url_headers,
     data: data,
     type: "post",
     contentType: false,
          processData: false,
     success: function(data){
         //
     },
     error: function(data){
         //
     }
 });

　注意：contentType: false, processData: false -- 这两个参数规定发送数据不用编码，禁止将data装换为请求字符串格式。

六. 案例（仿微信对话框的图片发送）：

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

　　

　　2. 实现：

　　2.1 页面布局

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

　　2.2 事件绑定

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

　　2.3 图片添加到对话框

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

　　

 var reader = new FileReader();
           var imgDom;
         var dataUrl;
           reader.onload = function(e) {
             imgItem = document.createElement('img');
             dataUrl= e.target.result;

             //Android fix
             if(isAndroid() && dataUrl.indexOf("data:image/") != 0){
               dataUrl= dataUrl.replace("base64,", "image/" + file.type.split("/").pop()+ ";base64,");
             }

             $(imgDom).attr('src',dataUrl);

             //拼接dom
             var appendHTML = '<li class="me">'+
                         '<div class="c2"><span class="arrow"></span><span class="dialogText">'+
                         '<i data-id="'+file.name+'" class="uploading fa fa-spin fa-spinner"></i></span></div><div class="c1"></div></li>';
             $("#dialogs").append(appendHTML);
             imgItem.insertBefore($("i[data-id='"+file.name+"']"));

             //图片加载完后刷新iscroll
             refreshScroll();
         };
         reader.readAsDataURL(file);        

　　创建一个FileReader对象，readAsDataURL()以data url方式读取文件，onload事件的参数load事件对象event.target.result即为文件的data url形式。然后在对话列表中增加一行，data url地址赋值给img的src，为了效果好一点，在图片旁边加上loading的圈圈，等图片上上传完成后去掉即可。

　　这里对安卓的处理是参考百度反馈页面的fix，抱拳谢过~

　　2.4 上传图片大server -- 见 第五点。

　　2.5 错误处理

　　如果图片上传失败，则在图片旁边添加小圆叹号图标，并给其绑定一个click/tap事件，点击重新上传图片。

本文完！