JS+HTML5 FileReader如何實(shí)現(xiàn)文件上傳前本地預(yù)覽功能

這篇文章主要介紹了JS+HTML5 FileReader如何實(shí)現(xiàn)文件上傳前本地預(yù)覽功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

HTML5之FileReader的使用

HTML5定義了FileReader作為文件API的重要成員用于讀取文件，根據(jù)W3C的定義，F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。

FileReader的使用方式非常簡(jiǎn)單，可以按照如下步驟創(chuàng)建FileReader對(duì)象并調(diào)用其方法：

1.檢測(cè)瀏覽器對(duì)FileReader的支持

if(window.FileReader) { 
 var fr = new FileReader(); 
 // add your code here 
} 
else { 
 alert("Not supported by your browser!"); 
}

2. 調(diào)用FileReader對(duì)象的方法

FileReader 的實(shí)例擁有 4 個(gè)方法，其中 3 個(gè)用以讀取文件，另一個(gè)用來(lái)中斷讀取。下面的表格列出了這些方法以及他們的參數(shù)和功能，需要注意的是 ，無(wú)論讀取成功或失敗，方法并不會(huì)返回讀取結(jié)果，這一結(jié)果存儲(chǔ)在 result屬性中。

eadAsText：該方法有兩個(gè)參數(shù)，其中第二個(gè)參數(shù)是文本的編碼方式，默認(rèn)值為 UTF-8。這個(gè)方法非常容易理解，將文件以文本方式讀取，讀取的結(jié)果即是這個(gè)文本文件中的內(nèi)容。

readAsBinaryString：該方法將文件讀取為二進(jìn)制字符串，通常我們將它傳送到后端，后端可以通過(guò)這段字符串存儲(chǔ)文件。

readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開(kāi)頭的字符串，這段字符串的實(shí)質(zhì)就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。

下面通過(guò)一個(gè)上傳圖片預(yù)覽和帶進(jìn)度條上傳來(lái)展示FileReader的使用。

<script type="text/javascript"> 
 function showPreview(source) { 
  var file = source.files[0]; 
  if(window.FileReader) { 
  var fr = new FileReader(); 
  fr.onloadend = function(e) { 
   document.getElementById("portrait").src = e.target.result; 
  }; 
  fr.readAsDataURL(file); 
  } 
 } 
 </script>

 <input type="file" name="file" onchange="showPreview(this)" /> 
<img id="portrait" src="" width="70" height="75">

if(!/image\/\w+/.test(file.type)){ 
 alert("請(qǐng)確保文件為圖像類(lèi)型"); 
 return false; 
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JS+HTML5 FileReader如何實(shí)現(xiàn)文件上傳前本地預(yù)覽功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!