new FileReader()

1、調用FileReader對象的方法

方法名 參數 描述
abort none 中斷讀取
readAsBinaryString file 將文件讀取爲二進制碼
readAsDataURL file 將文件讀取爲 DataURL
readAsText file, [encoding] 將文件讀取爲文本

readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法很是容易理解，將文件以文本方式讀取，讀取的結果便是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取爲二進制字符串，一般咱們將它傳送到後端，後端能夠經過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這裏的小文件一般是指圖像與 html 等格式的文件。

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

3、前端圖片數據加載顯示

<progress id="Progress" value="0" max="100"></progress> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75"> function showPreview(source) { var file = source.files[0]; console.log(file); if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { // console.log(this.result); document.getElementById("portrait").src = e.target.result; }; //給FileReader對象一個讀取完成的方法,使用readAsDataURL會返回一個url,這個值就保存在事件對象的result裏,img經過加載這個地址,完成圖片的加載 fr.readAsDataURL(file); } var total = source.files[0].size; fr.onprogress = function(ev) { // 簡單測試了一下 大概12M左右的傳輸速度 // 推薦測試的時候用一個視頻 console.log(ev.loaded / total); var loading = (ev.loaded / total)*100; document.getElementById("Progress").value = loading; } }
4、base64與後臺交互前端代碼

<input type="file" id="upload-file"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> // 用戶選擇圖片進行上傳 // 上傳成功, 後臺返回圖片的URL // 顯示在當前頁面上 document.getElementById("upload-file").addEventListener("change", function(){ for (var i = 0; i < this.files.length; i++) { var file = this.files[i]; var reader = new FileReader(); reader.onload = function (ev) { console.log(ev); console.log(ev.target.result); var base64Str = ev.target.result.split(",")[1]; //console.log(base64Str) $.ajax({ url: "reImg.php", data: { "base64file": base64Str }, type: "post", success: function (res) { createImg(res); } }) } reader.readAsDataURL(file); } }); function createImg(imgSrc){ var theImg = document.createElement("img"); theImg.src = imgSrc; document.body.appendChild(theImg); theImg.className = "imgC"; }
轉載於：https://www.jianshu.com/p/cde728c4e334