HTML5的FileReader對象實現圖片預覽及上傳

1、關於FileReader；

一、FileReader即構造函數（構造對象），因此 必須 和 new 一塊兒使用！

二、FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

  其中File對象能夠是來自用戶在一個input元素上選擇文件後返回的Filelist對象,也能夠來自拖放操做生成的DataTransfer 對象,還能夠是來自在一個 HTMLCanvasElement 上執行mozGetAsFile()方法後返回結果.

建立一個FileReader 對象 很簡單,以下:

let reader = new FileReader(); //返回一個新構造的FileReader

三、FileReader接口的方法

 FileReader接口有4個方法，其中3個用來讀取文件，另外一個用來中斷讀取。不管讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在result屬性中。

1. readAsBinaryString(file) : 將文件讀取爲二進制編碼,

2. readAsText(file,[encoding]) : 將文件讀取爲文本,

3. readAsDataURL(file) : 將文件讀取爲DataURL,

4. abort(none) : 中斷讀取操做.

四、FileReader接口事件

 FileReader接口包含了一套完整的事件模型，用於捕獲讀取文件時的狀態。

事件	         描述
onabort	      中斷時觸發
onerror	      出錯時觸發
onload	      文件讀取成功完成時觸發
onloadend	  讀取完成觸發，不管成功或失敗
onloadstart	  讀取開始時觸發
onprogress	  讀取中

五、經過FileReader對象實現圖片預覽及上傳：

  FileReader 的 readAsDataURL（）方法 能夠將 圖片 轉化成data64位的字符串，便可以將圖片 以字符串參數 存入數據庫。這樣的的優點 在於：前端能夠少對一個 接口（後臺少寫個接口）。最重要的是 服務器 不會儲存垃圾文件！

//首先檢測瀏覽器對FileReader的兼容性
if(window.FileReader) {  //支持 or  if(typeof FileReader != 'undefined'){  
  alert("支持！");
}else {  
  alert("不支持！");  
}  

//html代碼和 css 代碼
//.upload-pic-box{width:120px;height:120px;position:relative;}
//.upload-pic-box img{width:120px;height:120px;}
//.upload-pic-box input{width:120px;height:120px;position:absolute;left:0px;top:0px; opacity:0;}

<div className="upload-pic-box">
    <img src={this.state.fileUrl} alt="" id="portrait"/>
    <input id="uploadImage" type="file" name="file" onChange={this.showPreview}/>
    //<input type="file" multiple name="" id="uploadImage" value="" accept="image/jpeg,image/png">
    //multiple 支持多個文件同時上傳 accept：設置當前file支持的文件格式
</div>

//js代碼
showPreview = (ev) => {
      var _this = this;
      var file = ev.target.files[0];
      //獲取文件類型
      const fileType = file.type;
      //檢測是否爲圖像文件 
      if(!/image\/\w+/.test(file.type)){  
        alert("該文件不是圖片類型，請從新選擇！");  
        return;  
      } 
 
      //獲取圖片大小,file.size獲取到的單位爲 B，將其轉換爲kb，並保留二位小數點
      const  fileSize =(file.size / 1024).toFixed(2);
      if(Number(fileSize) > (1024 * 1024)){
         message.warn("圖片不能大於1M!");
         return;
      }
      if(window.FileReader) {  
          var fr = new FileReader();  
          fr.onloadend = function(e) { 
              // e.total:文件總大小 e.loaded:當前已下載大小 e.target.result:文件轉化結果
              //document.getElementById("portrait").src = e.target.result;
              _this.setState({
                 fileUrl: e.target.result
               });
              //緩存當前64位url  
              _this.state.uploadPicData = e.target.result;
          };  
          fr.readAsDataURL(file);  
      }  
  }

 

參考文獻：

https://www.cnblogs.com/exhuasted/p/6170562.html

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

http://blog.csdn.net/jackfrued/article/details/8967667

http://blog.csdn.net/tonvchong/article/details/22193435

http://blog.csdn.net/u014236259/article/details/52885591

感謝！