html页面中拍照和上传照片那些事儿（一）
cnzthttp://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端改变接口实现。
四. 用法：
1 document.getElementById("imgUpload").onchange = function(e){ 2 console.log(e); 3 var file = e.target.files[0]; 4 5 console.log(file ); 6 }
onchange -- input内容改变是触发，即重新选择新的文件。
e -- onchange事件的参数，指向change事件，这里我们使用它的target属性。结构如下：
file -- e.target.files[0] -- input标签中的文件对象，包含文件的修改时间，尺寸，类型及文件名，结构如下：
五. 上传图片：
上传图片利用formdata，通过new Formdata(formdom)来获取formdata，结合ajax上传server
1 //html代码 2 <form action="" id="formId"> 3 <input type="file" name="image" accept="images/*" id="CameraUplBtn" capture="camera" /> 4 </form> 5 6 7 //js代码 8 var data = new FormData(document.getElementById("formId")); 9 $.ajax({ 10 url: url_send, 11 headers: url_headers, 12 data: data, 13 type: "post", 14 contentType: false, 15 processData: false, 16 success: function(data){ 17 // 18 }, 19 error: function(data){ 20 // 21 } 22 });
注意：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。上代码：
1 var reader = new FileReader(); 2 var imgDom; 3 var dataUrl; 4 reader.onload = function(e) { 5 imgItem = document.createElement('img'); 6 dataUrl= e.target.result; 7 8 //Android fix 9 if(isAndroid() && dataUrl.indexOf("data:image/") != 0){ 10 dataUrl= dataUrl.replace("base64,", "image/" + file.type.split("/").pop()+ ";base64,"); 11 } 12 13 $(imgDom).attr('src',dataUrl); 14 15 //拼接dom 16 var appendHTML = '<li class="me">'+ 17 '<div class="c2"><span class="arrow"></span><span class="dialogText">'+ 18 '<i data-id="'+file.name+'" class="uploading fa fa-spin fa-spinner"></i></span></div><div class="c1"></div></li>'; 19 $("#dialogs").append(appendHTML); 20 imgItem.insertBefore($("i[data-id='"+file.name+"']")); 21 22 //图片加载完后刷新iscroll 23 refreshScroll(); 24 }; 25 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事件，点击重新上传图片。
本文完！
