標籤：com 技術分享 loading nload 分享 load UNC scale get
FileReader對象允許web應用程式非同步讀取儲存在電腦上的檔案的內容，使用File或Bolb對象指定要讀取的檔案或資料。其中File對象可以是來自使用者在一個<input>元素上選擇檔案後返回的FileList對象，也可以是來自拖放操作產生的DataTransfer對象，還可以是來自在一個HTMLCanvasElement上執行的mozGetAsFile()方法後返回結果。
屬性 FileReader.error在讀取檔案時發生錯誤
FileReader.readyState| 常量名 | 值 | 描述 |
| EMPTY | 0 | 還沒有載入任何資料 |
| LOADING | 1 | 資料正在被載入 |
| DONE | 2 | 已完成全部的讀取請求 |
該屬性僅在讀取操作完成後才有效，資料格式取決於使用哪種方式來進行讀取操作。返迴文件內容。
事件處理 FileReader.onabort處理abort事件，該事件在讀取操作被中斷時觸發。
FileReader.onerror處理error事件，該事件在讀取發生錯誤時觸發。
FileReader.onload處理load事件，該事件在讀取操作完成時觸發。
FileReader.onloadstart處理loadstart事件，該事件在讀取操作開始時觸發。
FileReader.onloadend處理loadend事件，該事件在讀取操作結束時觸發（要麼成功，要麼失敗）。
FileReader,onprogress處理progress事件，在讀取Bolb時觸發。
方法 FileReader.abort()中止讀取操作，在返回時，readyState的屬性為DONE
FileReader.readAsArrayBuffer()開始讀取指定的Blob中的內容, 一旦完成, result 屬性中儲存的將是被讀取檔案的 ArrayBuffer資料對象.
FileReader.readAsBinaryString()開始讀取指定的Blob中的內容, 一旦完成, result 屬性中將包含所讀取檔案的原始位元據。
FileReader.readAsDataURL()開始讀取指定的Blob中的內容, 一旦完成, result 屬性中將包含一個data：URL格式的字串以表示所讀取的檔案內容。
FileReader.readAsText()開始讀取指定的Blob中的內容, 一旦完成, result 屬性中將包含一個字串以表示所讀取的檔案內容。
檔案上傳<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <input type="text" name="name" value="1234"> <input type="text" name="pwd" value="5678"> <input type="file" name="file" id="file" onchange="change()"> <input type="button" value="提交" onclick="submit()"> <img width="300" id="img" alt=""> <script> var fileInp = document.getElementById(‘file‘); var reader = new FileReader(); var img = document.getElementById(‘img‘); function change(){ var file = fileInp.files[0]; if(file.size > 0){ reader.readAsDataURL(file); } } reader.onload = function(){ img.src = reader.result; } function submit(){ var http = new XMLHttpRequest(); http.open(‘POST‘, ‘/file‘, true); http.onload = function(res) { console.log(res) }; http.send() } </script></body></html>View Code
FileReader上傳檔案
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
