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事件，点击重新上传图片。
本文完！