FileReader - Web API 接口 | MDN
DEMO

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.

上传图片显示预览图请选择一个图像文件：添加图片请选择一个图像文件：添加图片(){ ).click(); ).parent(); ); 39 dads(result,input); 40 }) dads(result,input){ ){ ; ); { (){ ]; .test(file.type)){ ); ; 53 } FileReader(); 55 reader.readAsDataURL(file); (e){ ); 58 } 59 }) 60 } 61 }