js實作純前端的圖片預覽_javascript技巧

圖片上傳是一個普通不過的功能，而圖片預覽就是就是上傳功能中不可或缺的子功能了。在這之前，我曾經透過訂閱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標籤下加入這句話： 。這樣就可以告訴IE，預設使用目前IE的最高版本解析、渲染網頁了。

解決方法2－採用 document.selection.createRangeColleciton() 取得真實位址，具體操作如下：

五、补充：使用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);
};

以上就是本文的全部内容，希望对大家的学习有所帮助。