將檔案讀取為 dataURL

通過使用 HTML5 File API 可以完成在 Web 應用程式中讀取檔案的內容。首先，在 HTML 中新增 type="file" 的輸入：

<input type="file" id="upload">

接下來，我們將在檔案輸入上新增更改偵聽器。此示例通過 JavaScript 定義偵聽器，但也可以在 input 元素上新增為屬性。每次選擇新檔案時都會觸發此偵聽器。在此回撥中，我們可以讀取所選檔案並執行進一步操作（例如使用所選檔案的內容建立影象）：

document.getElementById('upload').addEventListener('change', showImage);

function showImage(evt) {
    var files = evt.target.files;

    if (files.length === 0) {
        console.log('No files selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}