JS魔法堂之實戰：純前端的圖片預覽

標籤：style   blog   http   color   使用   os   io   strong   

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  圖片上傳是一個普通不過的功能，而圖片預覽就是就是上傳功能中必不可少的子功能了。在這之前，我曾經通過訂閱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以下，那就沒木有辦法實現圖片預覽了。

  解決辦法──在head標籤下加入這句： <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 。這樣就可以告訴IE，預設使用當前IE的最高版本解析、渲染網頁了。

 

六、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

   好吧，現在媽媽再也不擔心我的圖片預覽實現得太麻煩了！

   如果覺得上面的使用方式不方便，可以訪問https://github.com/fsjohnhuang/preview/blob/master/preview.js，我已經將其封裝成工具函數了。

   尊重原創，轉載請註明來自：http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John