摘要：一前言圖片上傳是一個普通不過的功能，而圖片預(yù)覽就是就是上傳功能中必不可少的子功能了。偶然從上找到純前端圖片預(yù)覽的相關(guān)資料，經(jīng)過整理后記錄下來以便日后查閱。類型為，表示在讀取文件時發(fā)生的錯誤，只讀。

圖片上傳是一個普通不過的功能，而圖片預(yù)覽就是就是上傳功能中必不可少的子功能了。在這之前，我曾經(jīng)通過訂閱input[type=file]元素的onchange事件，一旦更改路徑則將圖片上傳至服務(wù)器，接著就獲取圖片路徑并賦值到img元素上。先不管文件異步提交的解決方案，就是服務(wù)端清理那些臨時的預(yù)覽圖片已經(jīng)增加不少工作量了。

偶然從MDN上找到純前端圖片預(yù)覽的相關(guān)資料，經(jīng)過整理后記錄下來以便日后查閱。

FileReader是HTML5的新特性，用于讀取Blob和File類型的數(shù)據(jù)。具體的用法如下：

1. 構(gòu)造方式
var fr = new FileReader();

2. 屬性

readyState：類型為unsigned short，F(xiàn)ileReader實例的當(dāng)前狀態(tài)，（EMPTY——0，還沒有加載任何數(shù)據(jù)；LOADING——1，數(shù)據(jù)正在加載；DONE——2，已完成全部的讀取請求），只讀。

result：讀取到的文件內(nèi)容，只讀。

error：類型為DOMError，表示在讀取文件時發(fā)生的錯誤，只讀。

3. 方法

abort()：中止讀取操作，并將readyState設(shè)置為DONE。當(dāng)沒有執(zhí)行讀取操作時，調(diào)用該方法會拋DOM_FILE_ABORT_ERR異常。

readAsArrayBuffer(Blob blob)：讀取數(shù)據(jù)，result屬性被設(shè)置為ArrayBuffer類型

readAsText(Blob blob [, encoding="utf-8"])：讀取數(shù)據(jù)，result屬性被設(shè)置為String類型

readAsBinaryString(Blob blob)：讀取數(shù)據(jù)，result屬性被設(shè)置為原始二進(jìn)制數(shù)據(jù)

readAsDataURL(Blob blob)：讀取數(shù)據(jù)，result屬性被設(shè)置為Data URI Scheme形式

4.事件

onload：讀取數(shù)據(jù)成功后觸發(fā)

onerror：讀取數(shù)據(jù)時拋異常時觸發(fā)

onloadstart：讀取數(shù)據(jù)前觸發(fā)

onloadend：讀取數(shù)據(jù)后觸發(fā)，在onload或onerror后觸發(fā)

onabort：中止讀取后觸發(fā)

onprogress：讀取過程中周期性觸發(fā)

5. 瀏覽器支持

FF3.6+，Chrome7+，IE10+

作用：主要作用是對圖片進(jìn)行透明處理（IE5.5~6并不支持透明的png）

樣式中的使用方式

#preview{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

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";

屬性

enabled：可選項，設(shè)置濾鏡是否激活。值范圍true(默認(rèn))，false

sizingMethod：可選項，設(shè)置濾鏡作用的圖片在容器邊界內(nèi)的顯示方式，值范圍crop（剪切圖片以適應(yīng)容器尺寸），image（默認(rèn)值，增大或縮小容器尺寸以適應(yīng)圖片的尺寸），scale（縮放圖片以適應(yīng)容器尺寸）

src：必填項，使用絕對或相對URL指向背景圖片。當(dāng)URL為用戶計算機(jī)本地地址時有效, 而img元素的src為用戶計算機(jī)本地地址時會拋不允許訪問本地文件系統(tǒng)的異常。

接下來我們就利用FileReader的readAsDataURL來獲取Data URI Scheme來實現(xiàn)圖片預(yù)覽的功能，而IE5.5~9我們就使用濾鏡DXImageTransform.Microsoft.AlphaImageLoader來作降級處理。

html片斷：

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,但文本模式卻設(shè)置為10以下，那就沒木有辦法實現(xiàn)圖片預(yù)覽了。

解決辦法1──在head標(biāo)簽下加入這句： 。這樣就可以告訴IE，默認(rèn)使用當(dāng)前IE的最高版本解析、渲染網(wǎng)頁了。

解決辦法2──采用 document.selection.createRangeColleciton() 獲取真實地址，具體操作如下：

// 假設(shè)fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText;

通過FileReader的readAsDataURL方法獲取的Data URI Scheme會生成一串很長的base64字符串，若圖片較大那么字符串則更長，若頁面出現(xiàn)reflow時則會導(dǎo)致性能下降。解決方案如下：

1. 預(yù)覽的img標(biāo)簽使用絕對定位，從而脫離正常文檔流，那么就與文檔的其他元素?zé)o關(guān)了，而reflow時則不會影響性能。

2. 采用 window.URL.createObjectURL(Blob blob) 生成數(shù)據(jù)鏈接。

var createObjectURL = function(blob){
  return window[window.webkitURL ? "webkitURL" : "URL"]["createObjectURL"](blob);
};

注意： window.URL.createObjectURL 生成的數(shù)據(jù)鏈接是獨占內(nèi)存的，因此若不時用時需要調(diào)用 window.URL.revokeObjectURL(DOMString objUrl) 來釋放內(nèi)存。在刷新頁面時，也會自動釋放內(nèi)容。

var resolveObjectURL = function(blob){
  window[window.webkitURL ? "webkitURL" : "URL"]["revokeObjectURL"](blob);
};

好吧，現(xiàn)在媽媽再也不擔(dān)心我的圖片預(yù)覽實現(xiàn)得太麻煩了！
如果覺得上面的使用方式不方便，可以訪問https://github.com/fsjohnhuang/preview/blob/master/preview.js，我已經(jīng)將其封裝成工具函數(shù)了。

如果您覺得本文的內(nèi)容有趣就掃一下吧！捐贈互勉！

??