Javascript FileReader詳解

一、FileReader的基礎知識

FileReader是一個可以讀取文件內容的JavaScript對象，它是通過異步操作的方式在瀏覽器中讀取本地文件內容。FileReader對象可以讀取文件本身或者從File API或者HTML5拖放API傳遞的文件。在這裡，我們將會按照FileReader的基礎知識、功能及簡單使用、常見應用等幾個方面來詳細講解。

為便於演示，我們假設我們有一個HTML頁面包含一個元素，你可以通過它來選擇你所要讀取的文件。

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e){
    //在這裡可以執行相關操作
},false);

二、FileReader的主要功能及使用

通過FileReader可以實現的主要功能有：

• 讀取文件本身
• 讀取文件的內容
• 將文件的內容轉化為二進制數組或者base64編碼字符串
• 監聽文件讀取進程

下面我們按照這幾個方面來詳細講解一下。

1、讀取文件本身

var file = fileInput.files[0]; //通過input元素指定文件
console.log(file.name); //"test.txt"，文件的名字
console.log(file.size); //6，文件的大小，單位為字節
console.log(file.type); //"text/plain"，文件類型

2、讀取文件的內容

var reader = new FileReader();
reader.readAsText(file); //讀取文件內容
reader.onload = function(){
    console.log(reader.result); //"Hello"，文件內容
};

3、將文件的內容轉化為二進制數組或者base64編碼字符串

//轉化為二進制數組
reader.readAsArrayBuffer(file);
reader.onload = function(){
    var arrayBuffer = reader.result;
};

//轉化為base64編碼字符串
reader.readAsDataURL(file);
reader.onload = function(){
    var base64 = reader.result;
};

4、監聽文件讀取進程

reader.onprogress = function(e){
    if(e.lengthComputable){
        var percent = (e.loaded / e.total) * 100;
        console.log(percent + '%'); //打印讀取進程百分比
    }
};
reader.onloadend = function(){
    console.log('讀取完成'); //文件讀取完成後的操作
};
reader.onerror = function(){
    console.log('讀取失敗'); //文件讀取錯誤的操作
};

三、常見應用

在實際應用中，FileReader可以很方便地實現以下幾個功能：

1、在頁面中預覽圖片

var file = fileInput.files[0]; //獲取選擇的文件
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
    var img = document.createElement('img');
    img.src = reader.result;
    document.body.appendChild(img); //添加預覽圖片到頁面
};

2、在頁面中預覽視頻

var file = fileInput.files[0]; //獲取選擇的文件
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
    var video = document.createElement('video');
    video.src = reader.result;
    document.body.appendChild(video); //添加預覽視頻到頁面
};

3、上傳文件到服務器

var file = fileInput.files[0]; //獲取選擇的文件
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(){
    var xhr = new XMLHttpRequest();
    var url = '/upload'; //上傳地址
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
    xhr.send(reader.result); //將二進制數據上傳到服務器
};

四、總結

通過本文的介紹，可以看到JavaScript的FileReader對象可以很方便地在瀏覽器中讀取本地文件內容並進行一些基本操作。它是HTML5的新特性之一，具有很大的應用價值。在實際應用中，可以根據需求，進行定製化的開發。