JS+HTML5 FileReader實現(xiàn)文件上傳前本地預覽功能
HTML5之FileReader的使用
HTML5定義了FileReader作為文件API的重要成員用于讀取文件，根據(jù)W3C的定義，F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。
FileReader的使用方式非常簡單，可以按照如下步驟創(chuàng)建FileReader對象并調(diào)用其方法：
1.檢測瀏覽器對FileReader的支持
if(window.FileReader) {
var fr = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}
2. 調(diào)用FileReader對象的方法
FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數(shù)和功能，需要注意的是 ，無論讀取成功或失敗，方法并不會返回讀取結(jié)果，這一結(jié)果存儲在 result屬性中。
eadAsText：該方法有兩個參數(shù)，其中第二個參數(shù)是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結(jié)果即是這個文本文件中的內(nèi)容。
readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質(zhì)就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。
下面通過一個上傳圖片預覽和帶進度條上傳來展示FileReader的使用。
<script type="text/javascript">
function showPreview(source) {
var file = source.files[0];
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
document.getElementById("portrait").src = e.target.result;
};
fr.readAsDataURL(file);
}
}
</script>
<input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75">
if(!/image\/\w+/.test(file.type)){
alert("請確保文件為圖像類型");
return false;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- javascript結(jié)合fileReader 實現(xiàn)上傳圖片
- JavaScript通過filereader接口讀取文件
- JS中利用FileReader實現(xiàn)上傳圖片前本地預覽功能
- JS+HTML5 FileReader對象用法示例
- JavaScript html5利用FileReader實現(xiàn)上傳功能
- 原生js FileReader對象實現(xiàn)圖片上傳本地預覽效果
- JavaScript使用FileReader實現(xiàn)圖片上傳預覽效果
- 基于JavaScript FileReader上傳圖片顯示本地鏈接
- JS中FileReader類實現(xiàn)文件上傳及時預覽功能
- JavaScript中的FileReader示例詳解
相關(guān)文章
對于學前端的小伙伴來說，吸引你們?nèi)肟拥拇蠖际且恍╈趴岬捻撁妗１疚膶⒂肑avaScript編寫一個酷炫的3D圖片演示效果，感興趣的可以了解一下2022-03-03
uni-app應(yīng)用配置manifest.json最全最詳細配置
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細配置,manifest.json文件是UniApp開發(fā)中用來配置應(yīng)用信息的重要文件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
經(jīng)?？吹竭@倆哥們，看來看去都是講他們的區(qū)別，一直沒搞太清楚作用究竟是什么，現(xiàn)在記錄下自己理解，有錯的話希望指出！2014-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)左側(cè)導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了原生js生成圖片驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
本文通過實例代碼給大家介紹了js代碼判斷的方法，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2007-12-12
Javascript實現(xiàn)Web顏色值轉(zhuǎn)換
這篇文章主要介紹了Javascript實現(xiàn)Web顏色值轉(zhuǎn)換,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)拖拽盒子效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細介紹了js瀑布流布局的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)通過開始結(jié)束控制的計時器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02