<!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();" multiple=“multiple”> <br> <div></div> <p></p> <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]); //讀取圖片 // reader.readAsText(file[0]); //讀取txt文件 /*獲取數據*/ /*FileReader提供一個完整的事件模型，用來捕獲讀取文件時的狀態 * onabort:讀取文件中斷片時觸發 * onerror:讀取錯誤時觸發 * onload:文件讀取成功完成時觸發 * onloadend:讀取完成時觸發，無論成功還是失敗 * onloadstart:開始讀取時觸發 * onprogress:讀取文件過程中持續觸發*/ reader.onload=function(){ //console.log(reader.result); /*展示*/ document.querySelector("img").src=reader.result; // document.querySelector('p').innerText= reader.result; } reader.onprogress=function(e){ var percent= e.loaded/ e.total*100+"%"; div.style.width=percent; } } </script> </body> </html>