使用reader.onload讀取文件內容的方法

一、選取文件

使用reader.onload讀取文件內容時，首先需要選取文件。在HTML中可以使用來實現。需要注意的是，為了防止部分瀏覽器的兼容性問題，需要在form標籤中添加屬性enctype=”multipart/form-data”。具體代碼如下：

<form enctype="multipart/form-data">
    <input type="file" id="file" name="file">
</form>

二、讀取文件內容

讀取文件內容時，可以使用FileReader.readAsText()方法。該方法會將文件內容讀取為字元串。需要注意的是，FileReader.readAsText()是非同步方法，需要在onload事件中獲取文件內容。具體代碼如下：

let fileInput = document.getElementById('file');
fileInput.addEventListener('change', (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = (e) => {
        console.log(e.target.result);
    }
});

三、讀取二進位文件內容

如果需要讀取二進位文件內容，可以使用FileReader.readAsArrayBuffer()方法。該方法會將二進位文件內容讀取為ArrayBuffer對象。需要注意的是，ArrayBuffer對象並不能直接顯示，需要使用TypedArray或DataView進行解析。具體代碼如下：

let fileInput = document.getElementById('file');
fileInput.addEventListener('change', (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = (e) => {
        let buffer = e.target.result;
        let dataView = new DataView(buffer);
        console.log(dataView.getInt32(0));
    }
});

四、讀取圖片文件內容

讀取圖片文件內容時，可以使用FileReader.readAsDataURL()方法。該方法會將圖片文件內容讀取為Base64編碼的字元串。使用標籤可以直接顯示該圖片。具體代碼如下：

let fileInput = document.getElementById('file');
fileInput.addEventListener('change', (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
        let img = document.createElement('img');
        img.src = e.target.result;
        document.body.appendChild(img);
    }
});