想要用h5在移动端实现图片上传&预览效果，首先要了解html5的文件api相关知识（所有api只列举本功能所需）:
1.Blob对象
Blob表示原始二进制数据,Html5的file对象就继承于它，它提供以下属性：
type：mime类型,如果是未知类型则返回一个空字符串
size：Blob对象的字节长度
2.input(type=“file”)控件与file&FileList对象
<input type="file" accept="image/*” multiple id=“file"/>
见上述代码：
multiple：表示file控件允许一次放置多个文件
accept：用来让input只能接受某种类型的文件，但是目前主流浏览器对其的支持都只局限于打开文件选择窗口时，默认选择图片文件而已，如果其他类型文件，file控件也能正常接受。所以要单独加判断：
input file控件有如下两个属性：
name:文件名，不包含路径(悲催的是iphone返回的文件名都是image.***)
lastModifiedDate:文件的最后修改日期
file：控件内用户选择的每一个文件都是一个file对象
FileList:为file对象的列表，访问方法如下：
var files = document.getElementById("file").files
判断代码如下：
for(var k=0;k<files.length;k++){
if(!/image\/\w+/.test(files[k].type)){
alert(files[k].name+"不是图像文件!");
}else{
//此处可加入文件上传的代码
alert(files[k].name+"文件已上传”)
}
}
3.FileReader接口
Filereader接口主要用于把文件读入内存，并且读取文件中的数据，FileReader接口提供了一个异步接口(用于在浏览器主线程中异步访问文件系统)，浏览器对FileReader的能力检测代码如下：
if(typeof FileReader == undefined) {
div.innerHTML = "不支持filereader";
}else{
div.innerHTML = "FileReader is ok”;
}
FileReader的方法
readAsDataURL:将文件读取为DataURL(base64最为常见)
FileReader的状态
onabort 数据读取中断
onerror 数据读取出错
onloadstart 开始读取数据
onprogress 读取中
onload 读取成功时触发
onloadend 数据读取完成，无论成功失败都触发
在各种方法中，this.result指向读取的文件数据
4.本功能核心代码如下：
<input type="file" accept="image/*" ref="file" onChange={ctr.onchange} multiple/>
<script>
if(typeof FileReader == undefined&&new FileReader().readAsDataURL) {
alert("不支持filereader");
}else{
var img = document.createElement("img");
document.body.appendChild(img);
var reader = new FileReader();
input = document.getElementById("file");
var onchange = function(){
var files = input.files;
for(var k=0;k<files.length;k++){
if(!/image\/\w+/.test(files[k].type)){
console.log(files[k].name+"不是图像文件!");
}else{
//此处可加入文件上传的代码
console.log(files[k].name+"文件已上传")
}
}
reader.readAsDataURL(files[0]);
reader.onload = function(){
img.src = this.result;
}
}
input.onchange = onchange;
}
</script>
很简单的感觉吧^_^
5.手机浏览器能力测试结果：
用手边的做了下功能支持的能力测试，结果如下，还是很乐观的哦～