JavaScript使用FileReader完成圖片上傳和預覽的功能介紹
來源：懂視網
責編：小OO
時間：2020-11-27 20:13:38
JavaScript使用FileReader完成圖片上傳和預覽的功能介紹
FileReader是HTML5 File API的一部分。它實現了一種異步文件讀取機制。可以把FileReader想象為XMLHttpRequest，區別只是它讀取的是文件系統，而不是遠程服務器。為了讀取文件中的數據，FileReader提供了如下幾個方法。readAsText(file，encoding)：以純文本的方式讀取文件，將讀取到的文件保存到result屬性中。readAsDataURL(file)：讀取文件并將文件以數據URI的形式保存在result屬性中。readAsBinaryString(file)：讀取文件并將一個字符串保存在result屬性中，字符串中的每個字符表示一個字節。
導讀FileReader是HTML5 File API的一部分。它實現了一種異步文件讀取機制。可以把FileReader想象為XMLHttpRequest，區別只是它讀取的是文件系統，而不是遠程服務器。為了讀取文件中的數據，FileReader提供了如下幾個方法。readAsText(file，encoding)：以純文本的方式讀取文件，將讀取到的文件保存到result屬性中。readAsDataURL(file)：讀取文件并將文件以數據URI的形式保存在result屬性中。readAsBinaryString(file)：讀取文件并將一個字符串保存在result屬性中，字符串中的每個字符表示一個字節。
這篇文章主要為大家詳細介紹了JavaScript使用FileReader實現圖片上傳預覽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
FileReader是HTML5 File API的一部分。它實現了一種異步文件讀取機制。可以把FileReader想象為XMLHttpRequest，區別只是它讀取的是文件系統，而不是遠程服務器。為了讀取文件中的數據，FileReader提供了如下幾個方法。
readAsText(file,encoding)：以純文本的方式讀取文件，將讀取到的文件保存到result屬性中。
readAsDataURL(file)：讀取文件并將文件以數據URI的形式保存在result屬性中。
readAsBinaryString(file)：讀取文件并將一個字符串保存在result屬性中，字符串中的每個字符表示一個字節。
readAsArrayBuffer(file)：讀取文件并將一個包含文件內容的ArrayBuffer保存在result屬性中。
multiple 屬性表示支持多張圖片
<p id="wrapper">
<input id="fileUpload" type="file" multiple /><br />
<p id="image-holder"> </p>
</p>
FileReader 可以支持 Internet Explorer 10+、FireFox,、Chrome 和Opera瀏覽器。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
JavaScript使用FileReader完成圖片上傳和預覽的功能介紹
FileReader是HTML5 File API的一部分。它實現了一種異步文件讀取機制。可以把FileReader想象為XMLHttpRequest，區別只是它讀取的是文件系統，而不是遠程服務器。為了讀取文件中的數據，FileReader提供了如下幾個方法。readAsText(file，encoding)：以純文本的方式讀取文件，將讀取到的文件保存到result屬性中。readAsDataURL(file)：讀取文件并將文件以數據URI的形式保存在result屬性中。readAsBinaryString(file)：讀取文件并將一個字符串保存在result屬性中，字符串中的每個字符表示一個字節。
