JS+HTML5 FileReader對象用法示例

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

這篇文章主要介紹了JS+HTML5 FileReader對象用法,結合具體實例形式分析了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;
   }
}

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript擴展技巧總結》、《JavaScript文件與目錄操作技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

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

您可能感興趣的文章:

JavaScript的arguments對象應用示例
使用特殊對象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們，下面為大家介紹下其具體的應用
2014-09-09
原生JS實現(xiàn)音樂播放器的示例代碼
這篇文章主要介紹了原生JS實現(xiàn)音樂播放器的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
使用layer.msg 時間設置不起作用的解決方法
今天小編就為大家分享一篇使用layer.msg 時間設置不起作用的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
javascript制作的滑動圖片菜單
本文給大家分享的是一款javascript制作的很漂亮的js滑動導航菜單，鼠標經過立即快速滑動切換顯示。有需要的小火把可以參考下。
2015-05-05
基于JavaScript實現(xiàn) 網頁切出網站title變化代碼
這篇文章主要介紹了基于JavaScript實現(xiàn) 網頁切出網站title變化代碼的相關資料,需要的朋友可以參考下
2016-04-04
第五章之BootStrap 柵格系統(tǒng)
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹BootStrap 柵格系統(tǒng)的相關資料,需要的朋友可以參考下
2016-04-04
微信小程序自定義可滑動頂部TabBar選項卡實現(xiàn)頁面切換功能示例
這篇文章主要介紹了微信小程序自定義可滑動頂部TabBar選項卡實現(xiàn)頁面切換功能,結合實例形式分析了微信小程序自定義頂部TabBar選項卡頁面切換功能的相關布局、樣式及功能實現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
使用Bootstrap打造特色進度條效果
這篇文章給大家分享了基于bootstrap打造的特色進度條效果，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-05-05
js創(chuàng)建對象的方法匯總
這篇文章主要介紹了js創(chuàng)建對象的方法，js一個有三種方法創(chuàng)建對象，這里為大家做一個總結，感興趣的小伙伴們可以參考一下
2016-01-01
前端本地文件獲取excel表格內容并渲染在頁面的方法
這篇文章主要介紹了前端本地文件獲取excel表格內容并渲染在頁面的方法,主要利用SheetJS插件用于處理Excel文件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-03-03