FileReader

2022-06-23 22:57:13 字數 1882 閱讀 5094

原文: 

filereader是前端進行檔案處理的一個重要的api,特別是在對的處理上,如果你想知道的處理原理,你就永遠不可能繞過它。

檔案處理是一系列的流程,每一步我們都需要知道,自己能做什麼,自己做了什麼。

第一步,獲取檔案

前端中,獲取檔案必須使用input標籤。

處理這個檔案,必須要用**的方式,體現出來,讓你能用**操作它。這裡主要是使用input標籤的onchange事件。

var file = document.getelementbyid('file');

file.onchange = function

(e)

關於file的小知識:前端在讀取到files陣列之後,可以對得到的檔案一些屬性進行讀取。這些屬性分別是:name、size、type、lastmodifieddate。

一個特別重要的點就是判斷的大小,根據檔案的大小進行後續操作。

var file = files[0];//

比如這個file是

if(file.size > 5000)

第二步,讀取檔案

1、讀取檔案,主要使用的是filereader類。它提供了幾個方法。

readastext(file, encoding); 

以純文字形式讀取檔案,讀取到的文字儲存在result屬性中。第二個引數代表編碼格式。

readasdataurl(file); 

讀取檔案並且將檔案以資料uri的形式儲存在result屬性中。

readasbinarystring(file); 

讀取檔案並且把檔案以字串儲存在result屬性中。

readasarraybuffer(file); 

讀取檔案並且將一個包含檔案內容的arraybuffer儲存咋result屬性中。

2、檔案讀取的過程是非同步操作,在這個過程中提供了三個事件。progress、error、load事件。

progress-每隔50ms左右,會觸發一次progress事件。

error-在無法讀取到檔案資訊的條件下觸發。

load-在成功載入後就會觸發。

<

input

id="file"

type

="file"

οnchange

="filechange"

/>

進度:<

span

id="progress"

>

span

>

<

div

id="box"

>

div>

js**:

//

獲取頁面元素物件

var file = document.getelementbyid('file');

var output = document.getelementbyid('box');

var progress = document.getelementbyid('progress');

//onchange事件

file.onchange = function

(e)

else

//檔案載入出錯

filereader.onerror = function

() ;

//載入成功後

filereader.onload = function

() output.innerhtml =html;

};//進度條進度

filereader.onprogress = function

(event)

}}

FileReader物件

filereader物件允許web應用程式非同步讀取儲存在使用者計算機上的檔案 或原始資料緩衝區 的內容,使用file或blob物件指定要讀取的檔案或資料。 檔案處理是一系列的流程。每一步我們都需要知道,自己能做什麼,自己做了什麼。 前端中,獲取檔案必須使用input標籤。 input id file ...

FileReader詳解

一 相容性 從上圖中可以看出ie7 8 9都不支援filereader物件 二 作用 使用支援filereader瀏覽器的使用者可以通過一個...

HTML5 FileReader

利用html5中的filereader類,動態切換af中panel的背景,動態設定img元素的 1 if filereader 6 var...