HTML5-FileReader
- 2019 年 10 月 10 日
- 筆記
鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload
readAsBinaryString 已經棄用，該用buffer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 20px; width: 0%; background-color:red; } </style> </head> <body> <!--展示圖片：--> <!--src:指定路徑(資源定位--url):src請求的是外部文件，一般來說是伺服器資源。意味著它需要向伺服器發送請求，它佔用伺服器資源--> <!--<img src="../images/l1.jpg" alt="">--> <!--需求：即時預覽： 即時：當用戶選擇完圖片之後就立刻進行預覽的處理 >>onchange 預覽：通過文件讀取對象的readAsDataURL()完成--> <form action=""> 文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br> <div></div> <input type="submit"> </form> <img src="" alt=""> <script> var div=document.querySelector("div"); /*FileReader:讀取文件內容 * 1.readAsText():讀取文本文件(可以使用Txt打開的文件)，返迴文本字元串，默認編碼是UTF-8 * 2.readAsBinaryString():讀取任意類型的文件。返回二進位字元串。這個方法不是用來讀取文件展示給用戶看，而是存儲文件。例如：讀取文件的內容，獲取二進位數據，傳遞給後台，後台接收了數據之後，再將數據存儲 * 3.readAsDataURL():讀取文件獲取一段以data開頭的字元串，這段字元串的本質就是DataURL.DataURL是一種將文件(這個文件一般就是指影像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉換為base64編碼的字元串形式，並且將這些內容直接存儲在url中>>優化網站的載入速度和執行效率。 * abort():中斷讀取*/ function getFileContent(){ /*1.創建文件讀取對象*/ var reader=new FileReader(); /*2.讀取文件，獲取DataURL * 2.1.說明沒有任何的返回值:void：但是讀取完文件之後，它會將讀取的結果存儲在文件讀取對象的result中 * 2.2.需要傳遞一個參數 binary large object:文件(圖片或者其它可以嵌入到文檔的類型) * 2.3:文件存儲在file表單元素的files屬性中，它是一個數組*/ var file=document.querySelector("#myFile").files; reader.readAsDataURL(file[0]); /*獲取數據*/ /*FileReader提供一個完整的事件模型，用來捕獲讀取文件時的狀態 * onabort:讀取文件中斷片時觸發 * onerror:讀取錯誤時觸發 * onload:文件讀取成功完成時觸發 * onloadend:讀取完成時觸發，無論成功還是失敗 * onloadstart:開始讀取時觸發 * onprogress:讀取文件過程中持續觸發*/ reader.onload=function(){ //console.log(reader.result); /*展示*/ document.querySelector("img").src=reader.result; } reader.onprogress=function(e){ var percent= e.loaded/ e.total*100+"%"; div.style.width=percent; } } </script> </body> </html>
