HTML5之文件操作全過程（FileReader）

第一步，獲取文件

前端中，獲取文件必須使用input標籤。而獲取到這個文件，必須要用代碼的方式，體現出來，讓你能用代碼操作它。這裏主要是使用input標籤的onchange事件。

<input id='file' type='file' />

var file = document.getELementById('file');
file.onchange = function(e){
    var files = e.target.files;
    //這個files就是獲取的file文件的一個數組。之後你可以使用任何方式來操作它。
}

前端在讀取到files數組之後，可以對得到的文件一些屬性進行讀取。這些屬性分別是：name、size、type、lastModifiedDate。

var file = files[0];//比如這個file是圖片
if(file.size > 5000){
    //處理壓縮操作
}

第二步，讀取文件（FileReader）

HTML5定義了FileReader作爲文件API的重要成員用於讀取文件，根據W3C的定義，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。

1.檢測瀏覽器對FileReader的支持

if(window.FileReader) {
    var fr = new FileReader();
    // add your code here
}else {
    alert("Not supported by your browser!");
}

2. FileReader常用的讀取文件的方法

FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。需要注意的是 ，無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在FileReader監聽的讀取文件事件的回調函數的result屬性中。

• abort： 中斷讀取文件。
• readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
• readAsBinaryString：該方法將文件讀取爲二進制字符串 ，通常我們將它傳送到後端，後端可以通過這段字符串存儲文件。
• readAsDataURL：該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案 。這裏的小文件通常是指圖像與 html 等格式的文件。

3. 監聽處理文件讀取事件（監聽文件讀取，回調函數返回文件讀取結果）

• onabort 中斷時觸發
• onerror 出錯時觸發
• onload 文件讀取成功完成時觸發
• onloadend 讀取完成觸發，無論成功或失敗
• onloadstart 讀取開始時觸發
• onprogress 讀取中

監聽事件使用案例

var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(e) {                 
	var body = document.querySelector('body');
	var link = document.createElement('a');
	link.download = filename;
	link.href = e.target.result;         //讀取文件成功後返回的文件鏈接Data URL
	link.style.display = 'none';
	body.appendChild(link);  
	link.click();
	body.removeChild(link);
}

讀取文件進度條，通過下面的代碼實現

<form>
    <fieldset>
        <legend>分度讀取文件：</legend>
        <input type="file" id="File" />
        <input type="button" value="中斷" id="Abort" />
        <p>
            <label>讀取進度：</label><progress id="Progress" value="0" max="100"></progress>
        </p>
        <p id="Status"></p>
    </fieldset>
</form>

var h = {
    init: function() {
        var me = this;
         
        document.getElementById('File').onchange = me.fileHandler;
        document.getElementById('Abort').onclick = me.abortHandler;
         
        me.status = document.getElementById('Status');
        me.progress = document.getElementById('Progress');
        me.percent = document.getElementById('Percent');
         
        me.loaded = 0;
        //每次讀取1M
        me.step = 1024 * 1024;
        me.times = 0;
    },
    fileHandler: function(e) {
        var me = h;
         
        var file = me.file = this.files[0];
         
        var reader = me.reader = new FileReader();
         
        //
        me.total = file.size;
         
        reader.onloadstart = me.onLoadStart;
        reader.onprogress = me.onProgress;
        reader.onabort = me.onAbort;
        reader.onerror = me.onerror;
        reader.onload = me.onLoad;
        reader.onloadend = me.onLoadEnd;
        //讀取第一塊
        me.readBlob(file, 0);
    },
    onLoadStart: function() {
        var me = h;
    },
    onProgress: function(e) {
        var me = h;
         
        me.loaded += e.loaded;
        //更新進度條
        me.progress.value = (me.loaded / me.total) * 100;
    },
    onAbort: function() {
        var me = h;
    },
    onError: function() {
        var me = h;
         
    },
    onLoad: function() {
        var me = h;
 
        if(me.loaded < me.total) {
            me.readBlob(me.loaded);
        } else {
            me.loaded = me.total;
        }
    },
    onLoadEnd: function() {
        var me = h;
         
    },
    readBlob: function(start) {
        var me = h;
         
        var blob,
            file = me.file;
         
        me.times += 1;
         
        if(file.webkitSlice) {
            blob = file.webkitSlice(start, start + me.step + 1);
        } else if(file.mozSlice) {
            blob = file.mozSlice(start, start + me.step + 1);
        }
         
        me.reader.readAsText(blob);
    },
    abortHandler: function() {
        var me = h;
         
        if(me.reader) {
            me.reader.abort();
        }
    }
};
 
h.init();

轉載鏈接 https://blog.csdn.net/jackfrued/article/details/8967667
轉載鏈接 https://blog.csdn.net/mapbar_front/article/details/78632928