一、前言
圖片上傳是一個普通不過的功能，而圖片預覽就是就是上傳功能中必不可少的子功能了。在這之前，我曾經通過訂閱input[type=file]元素的onchange事件，一旦更改路徑則將圖片上傳至服務器，接著就獲取圖片路徑并賦值到img元素上。先不管文件異步提交的解決方案，就是服務端清理那些臨時的預覽圖片已經增加不少工作量了。
偶然從MDN上找到純前端圖片預覽的相關資料，經過整理后記錄下來以便日后查閱。
二、準備功夫1──FileReader
FileReader是HTML5的新特性，用于讀取Blob和File類型的數據。具體的用法如下：
（1）. 構造方式
var fr = new FileReader();
（2）. 屬性
readyState：類型為unsigned short，FileReader實例的當前狀態，（EMPTY——0，還沒有加載任何數據；LOADING——1，數據正在加載；DONE——2，已完成全部的讀取請求），只讀。
result：讀取到的文件內容，只讀。
error：類型為DOMError，表示在讀取文件時發生的錯誤，只讀。
（3）. 方法
abort()：中止讀取操作，并將readyState設置為DONE。當沒有執行讀取操作時，調用該方法會拋DOM_FILE_ABORT_ERR異常。
readAsArrayBuffer(Blob blob)：讀取數據，result屬性被設置為ArrayBuffer類型
readAsText(Blob blob [, encoding='utf-8'])：讀取數據，result屬性被設置為String類型
readAsBinaryString(Blob blob)：讀取數據，result屬性被設置為原始二進制數據
readAsDataURL(Blob blob)：讀取數據，result屬性被設置為Data URI Scheme形式（具體請瀏覽《JS魔法堂：Data URI Scheme介紹》）
（4）.事件
onload：讀取數據成功后觸發
onerror：讀取數據時拋異常時觸發
onloadstart：讀取數據前觸發
onloadend：讀取數據后觸發，在onload或onerror后觸發
onabort：中止讀取后觸發
onprogress：讀取過程中周期性觸發
（5）. 瀏覽器支持
FF3.6+，Chrome7+，IE10+
三、準備功夫2──DXImageTransform.Microsoft.AlphaImageLoader濾鏡
（1）. 作用：主要作用是對圖片進行透明處理（IE5.5~6并不支持透明的png）
（2）. 樣式中的使用方式
#preview{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png"); }
（3）. JS中的使用方式
var preview = document.getElementById('preview'); preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')"; preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";
（4）. 屬性
enabled：可選項，設置濾鏡是否激活。值范圍true(默認)，false
sizingMethod：可選項，設置濾鏡作用的圖片在容器邊界內的顯示方式，值范圍crop（剪切圖片以適應容器尺寸），image（默認值，增大或縮小容器尺寸以適應圖片的尺寸），scale（縮放圖片以適應容器尺寸）
src：必填項，使用絕對或相對URL指向背景圖片。當URL為用戶計算機本地地址時有效, 而img元素的src為用戶計算機本地地址時會拋不允許訪問本地文件系統的異常。
四、實現
接下來我們就利用FileReader的readAsDataURL來獲取Data URI Scheme來實現圖片預覽的功能，而IE5.5~9我們就使用濾鏡DXImageTransform.Microsoft.AlphaImageLoader來作降級處理。
html片斷：
<style type="text/css"> #preview{ width: 100px; height: 100px; } </style> <!--[if lte IE 9]> <style type="text/css"> #preview{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> <![endif]--> <input type="file" onchange="showPreview(this);"/> <div id="preview"> </div>
js片斷：
var preview = function(el){ var pv = document.getElementById("preview"); // IE5.5~9使用濾鏡 if (pv.filters && typeof(pv.filters.item) === 'function'){ pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value; } else{ // 其他瀏覽器和IE10+（不支持濾鏡）則使用FileReader var fr = new FileReader(); fr.onload = function(evt){ var pvImg = new Image(); pvImg.style.width = pv.offsetWidth + 'px'; pvImg.style.height = pv.offsetHeight + 'px'; pvImg.src = evt.target.result; pv.removeChild(0); pv.appendChild(pvImg); }; fr.readAsDataURL(el.files[0]); } };
五、坑
由于IE11作了安全方面的考慮，使得在input[type=file]元素上通過value、outerHTML和getAttribute的方式都無法獲取用戶所選文件的真實地址，只能獲取到 C:\fakepath\文件名稱 。因此假如使用IE11,但文本模式卻設置為10以下，那就沒木有辦法實現圖片預覽了。
解決辦法1──在head標簽下加入這句： <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 。這樣就可以告訴IE，默認使用當前IE的最高版本解析、渲染網頁了。
解決辦法2──采用 document.selection.createRangeColleciton() 獲取真實地址，具體操作如下：
// 假設fileEl就是[type=file]元素 fileEl.select(); var filePath = document.selection.createRangeCollection()[0].htmlText;
六、20140902補充：使用window.URL.createObjectURL代替FileReader
通過FileReader的readAsDataURL方法獲取的Data URI Scheme會生成一串很長的base64字符串，若圖片較大那么字符串則更長，若頁面出現reflow時則會導致性能下降。解決方案如下：
1. 預覽的img標簽使用絕對定位，從而脫離正常文檔流，那么就與文檔的其他元素無關了，而reflow時則不會影響性能。
2. 采用 window.URL.createObjectURL(Blob blob) 生成數據鏈接。
var createObjectURL = function(blob){ return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob); };
注意： window.URL.createObjectURL 生成的數據鏈接是獨占內存的，因此若不時用時需要調用 window.URL.revokeObjectURL(DOMString objUrl) 來釋放內存。在刷新頁面時，也會自動釋放內容。
var resolveObjectURL = function(blob){ window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob); };
七、總結
好吧，現在媽媽再也不擔心我的圖片預覽實現得太麻煩了！
如果覺得上面的使用方式不方便，可以訪問https://github.com/fsjohnhuang/preview/blob/master/preview.js，我已經將其封裝成工具函數了。
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John
文章列表
留言列表
