# 选择预览本地图片 ## 效果图  **兼容性** - html5 √ - html4.01 × - IE9以下 × - IE8兼容方案 （[https://segmentfault.com/q/1010000004956184](https://segmentfault.com/q/1010000004956184)） 不过现在基本完全过渡到`html5`了，可以放心使用。 除非特殊场景如`IE` ## 思路 1. 用户选择图片后，通过`FileReader`对象读取图片数据为`base64` 2. html支持base64类型图片数据显示 ## 为什么这样做 有时候选择图片并不是需要立即上传，只是希望可以预览刚选择的图片。这时候就派上用场了 ## 可以写出文件到用户电脑吗？ 不能 <br /> 因为安全策略问题， 如果浏览器允许js写出文件到用户电脑， 是非常危险的行为。 <br /> 这么说，我能写出木马程序替换你的快捷方式，等你点击触发 <br /> ie的ocx控件是个例外， 据说flash也可以 （不过我不是那个时代的人） ## 示例 ```html <input type="file" onchange="showPreview(this)" accept="image/*" multiple /> <div id="tupian"></div> <script type="text/javascript"> function showPreview(source) { var fileList = source.files; if(window.FileReader) { for (var i=0; fileList.length > i; i++) { // 创建FileReader对象, 并设置onload事件 var fr = new FileReader(); fr.onloadend = function(e) { $('#tupian').append('<img src="'+e.target.result+'" style="width:100px;height:100px; margin:0 3px" />'); } // 读图片 fr.readAsDataURL(fileList[i]); } } } </script> ``` ## FileReader 允许浏览器通过对象读取用户电脑上的文件，二进制数据，base64URL等 ### 属性 | 属性名 |读写| 描述| |---|---|---| |error|只读|错误异常| |readyState |只读|值范围：<br/>EMPTY 0 还没有加载任何数据.<br/>LOADING 1 数据正在被加载.<br/>DONE 2 已完成全部的读取请求.| |result|只读|文件内容，只能在读取完成之类的地方用 ### 方法 | 方法名 | 描述| |---|---| |abort()|中止读取操作。在返回时，readyState属性为DONE。| |readAsArrayBuffer()|开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.| |readAsBinaryString() |开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。| |readAsDataURL()|开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。| |readAsText()|开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。| ### 事件 |事件 |描述| |---|---| |onabort| 中断时触发| |onerror| 出错时触发| |onload| 文件读取成功完成时触发| |onloadend| 读取完成触发，无论成功或失败| |onloadstart| 读取开始时触发| |onprogress| 读取中|