# 選擇預覽本地圖片 ## 效果圖  **兼容性** - 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| 讀取中|