JS+HTML5 FileReader對象用法示例
更新時間：2017年04月07日 11:42:26 作者：風(fēng)之約
這篇文章主要介紹了JS+HTML5 FileReader對象用法,結(jié)合具體實例形式分析了FileReader對象的常用方法及簡單使用技巧,需要的朋友可以參考下
本文實例講述了JS+HTML5 FileReader對象用法。分享給大家供大家參考，具體如下：
FileReader 實例中有四個方法來讀取文件數(shù)據(jù)
1、readAsBinaryString(Blob|File)2、
readAsDataURL(Blob|File)3、
readAsText(Blob|File)4、
readAsArrayBuffer(Blob|File)
FileReader 實例包含很多事件（onerror, onprogress, onload[result]）
<input name="file" id="uploadFile" />
var file = document.getElementById("uploadFile");
var bufferSize = 1024;
var pos = 0;
var onload = function(e) {
console.log("Read", e.target.result);
var img = document.createElement("img");
img.src = e.target.result;
img.width = 300;
img.height = 300;
document.body.appendChild(img);
};
var onerror = function() {}
var onprogress = function(e) {}
file.onchange = function() {
if (file.files) file = file.files[0];
while (pos < file.size) {
var reader = new FileReader();
reader.onload = onload;
reader.onerror = onerror;
/*reader.readAsText(file.slice(pos, bufferSize));
pos += bufferSize; */
reader.readAsDataURL(file);
pos = file.size + 1;
}
}
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript擴(kuò)展技巧總結(jié)》、《JavaScript文件與目錄操作技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- javascript結(jié)合fileReader 實現(xiàn)上傳圖片
- JavaScript通過filereader接口讀取文件
- JS中利用FileReader實現(xiàn)上傳圖片前本地預(yù)覽功能
- JS+HTML5 FileReader實現(xiàn)文件上傳前本地預(yù)覽功能
- JavaScript html5利用FileReader實現(xiàn)上傳功能
- 原生js FileReader對象實現(xiàn)圖片上傳本地預(yù)覽效果
- JavaScript使用FileReader實現(xiàn)圖片上傳預(yù)覽效果
- 基于JavaScript FileReader上傳圖片顯示本地鏈接
- JS中FileReader類實現(xiàn)文件上傳及時預(yù)覽功能
- JavaScript中的FileReader示例詳解
相關(guān)文章
JavaScript的arguments對象應(yīng)用示例
使用特殊對象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們，下面為大家介紹下其具體的應(yīng)用2014-09-09
這篇文章主要介紹了原生JS實現(xiàn)音樂播放器的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
使用layer.msg 時間設(shè)置不起作用的解決方法
今天小編就為大家分享一篇使用layer.msg 時間設(shè)置不起作用的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文給大家分享的是一款javascript制作的很漂亮的js滑動導(dǎo)航菜單，鼠標(biāo)經(jīng)過立即快速滑動切換顯示。有需要的小火把可以參考下。2015-05-05
基于JavaScript實現(xiàn) 網(wǎng)頁切出 網(wǎng)站title變化代碼
這篇文章主要介紹了基于JavaScript實現(xiàn) 網(wǎng)頁切出 網(wǎng)站title變化代碼的相關(guān)資料,需要的朋友可以參考下2016-04-04
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹BootStrap 柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
微信小程序自定義可滑動頂部TabBar選項卡實現(xiàn)頁面切換功能示例
這篇文章主要介紹了微信小程序自定義可滑動頂部TabBar選項卡實現(xiàn)頁面切換功能,結(jié)合實例形式分析了微信小程序自定義頂部TabBar選項卡頁面切換功能的相關(guān)布局、樣式及功能實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章給大家分享了基于bootstrap打造的特色進(jìn)度條效果，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-05-05
這篇文章主要介紹了js創(chuàng)建對象的方法，js一個有三種方法創(chuàng)建對象，這里為大家做一個總結(jié)，感興趣的小伙伴們可以參考一下2016-01-01
前端本地文件獲取excel表格內(nèi)容并渲染在頁面的方法
這篇文章主要介紹了前端本地文件獲取excel表格內(nèi)容并渲染在頁面的方法,主要利用SheetJS插件用于處理Excel文件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03