JS+HTML5 FileReader對(duì)象用法示例

更新時(shí)間：2017年04月07日 11:42:26 作者：風(fēng)之約

這篇文章主要介紹了JS+HTML5 FileReader對(duì)象用法,結(jié)合具體實(shí)例形式分析了FileReader對(duì)象的常用方法及簡(jiǎn)單使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JS+HTML5 FileReader對(duì)象用法。分享給大家供大家參考，具體如下：

FileReader 實(shí)例中有四個(gè)方法來(lái)讀取文件數(shù)據(jù)

1、readAsBinaryString(Blob|File)2、readAsDataURL(Blob|File)3、readAsText(Blob|File)4、readAsArrayBuffer(Blob|File)

FileReader 實(shí)例包含很多事件（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)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript擴(kuò)展技巧總結(jié)》、《JavaScript文件與目錄操作技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺談js使用in和hasOwnProperty獲取對(duì)象屬性的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談js使用in和hasOwnProperty獲取對(duì)象屬性的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
input點(diǎn)擊后placeholder中的提示消息消失
placeholder屬性是HTML5 中為input添加的。在input上提供一個(gè)占位符，文字形式展示輸入字段預(yù)期值的提示信息（hint），該字段會(huì)在輸入為空時(shí)顯示
2016-01-01
javascript和jQuery中的AJAX技術(shù)詳解【包含AJAX各種跨域技術(shù)】
這篇文章主要介紹了javascript和jQuery中的AJAX技術(shù),結(jié)合實(shí)例形式分析了javascript與jQuery中ajax的實(shí)現(xiàn)方法以及AJAX各種跨域技術(shù)的原理與操作技巧,需要的朋友可以參考下
2016-12-12
JavaScript30 一個(gè)月純 JS 挑戰(zhàn)中文指南(英文全集)
JavaScirpt30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來(lái)寫(xiě)東西，不借助框架和庫(kù)，也不使用編譯器和引用
2017-07-07
原生js實(shí)現(xiàn)購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
canvas實(shí)現(xiàn)動(dòng)態(tài)小球重疊效果
在javascript運(yùn)動(dòng)系列中，詳細(xì)介紹了各種運(yùn)動(dòng)，其中就包括碰壁運(yùn)動(dòng)。但是，如果用canvas去實(shí)現(xiàn)，卻是另一種思路。本文將詳細(xì)介紹canvas動(dòng)態(tài)小球重疊效果。下面跟著小編一起來(lái)看下吧
2017-02-02
javaScript代碼飄紅報(bào)錯(cuò)看不懂？讀完這篇文章再試試
這篇文章主要介紹了javaScript代碼飄紅報(bào)錯(cuò)看不懂？讀完這篇文章再試試,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
本文通過(guò)實(shí)例給大家詳解介紹了Bootstrap筆記之縮略圖、警告框知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03