将文件读取为 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]);
}