Html5 js FileReader介面（藝博會，添加商品時，上傳圖片，addGoods.html頁）

標籤：文本   var   put   ntb   das   eof   cin   coding   error   

用來把檔案讀入記憶體，並且讀取檔案中的資料。FileReader介面提供了一個非同步API，使用該API可以在瀏覽器主線程中非同步訪問檔案系統，讀取檔案中的資料。到目前文職，只有FF3.6+和Chrome6.0+實現了FileReader介面。

1、FileReader介面的方法

FileReader介面有4個方法，其中3個用來讀取檔案，另一個用來中斷讀取。無論讀取成功或失敗，方法並不會返回讀取結果，這一結果儲存在result屬性中。

 

FileReader介面的方法

方法名	參數	描述
readAsBinaryString	file	將檔案讀取為二進位編碼
readAsText	file,[encoding]	將檔案讀取為文本
readAsDataURL	file	將檔案讀取為DataURL
abort	(none)	終端讀取操作

 

 

2、FileReader介面事件

FileReader介面包含了一套完整的事件模型，用於捕獲讀取檔案時的狀態。

 

FileReader介面的事件

事件	描述
onabort	中斷
onerror	出錯
onloadstart	開始
onprogress	正在讀取
onload	成功讀取
onloadend	讀取完成，無論成功失敗

 

 

3、FileReader介面的使用

 

<script type="text/javascript">  var result=document.getElementById("result");  var file=document.getElementById("file");    //判斷瀏覽器是否支援FileReader介面  if(typeof FileReader == ‘undefined‘){      result.InnerHTML="<p>你的瀏覽器不支援FileReader介面！</p>";      //使選擇控制項不可操作      file.setAttribute("disabled","disabled");  }    function readAsDataURL(){      //檢驗是否為影像檔      var file = document.getElementById("file").files[0];      if(!/image\/\w+/.test(file.type)){          alert("看清楚，這個需要圖片！");          return false;      }      var reader = new FileReader();      //將檔案以Data URL形式讀入頁面      reader.readAsDataURL(file);      reader.onload=function(e){          var result=document.getElementById("result");          //顯示檔案          result.innerHTML=‘<img src="‘ + this.result +‘"  />‘;      }  }    function readAsBinaryString(){      var file = document.getElementById("file").files[0];      var reader = new FileReader();      //將檔案以二進位形式讀入頁面      reader.readAsBinaryString(file);      reader.onload=function(f){          var result=document.getElementById("result");          //顯示檔案          result.innerHTML=this.result;      }  }    function readAsText(){      var file = document.getElementById("file").files[0];      var reader = new FileReader();      //將檔案以文本形式讀入頁面      reader.readAsText(file);      reader.onload=function(f){          var result=document.getElementById("result");          //顯示檔案          result.innerHTML=this.result;      }  }  </script>  <p>      <label>請選擇一個檔案：</label>      <input type="file" id="file" />      <input type="button" value="讀取映像" onclick="readAsDataURL()" />      <input type="button" value="讀取位元據" onclick="readAsBinaryString()" />      <input type="button" value="讀取文字檔" onclick="readAsText()" />  </p>  <div id="result" name="result"></div>  

 

Html5 js FileReader介面（藝博會，添加商品時，上傳圖片，addGoods.html頁）