JS+HTML5 FileReader對象用法示例

更新時間：2017年04月07日 11:42:26 作者：風之約

這篇文章主要介紹了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擴展技巧總結(jié)》、《JavaScript文件與目錄操作技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

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