HTML5 使用 FileReader 读取并预览文件内容

参考：https://blog.csdn.net/liguodong456/article/details/83038619

HTML

    
文本：
    


    
二进制：
    


    
图像：
    

JavaScript

/* 选择文件 */
var fileText = document.querySelector("#file-text");
var fileBinary = document.querySelector("#file-bin");
var fileImage = document.querySelector("#file-image");

/* 结果 */
var fileResult = document.querySelector("#file-result");

/* 检测是否支持 FileReader */
if (typeof (FileReader) === "undefined") {
    fileResult.innerHTML = "您的浏览器不支持 FileReader";
} else {
    var reader = new FileReader();

    fileText.onchange = function () {
        var file = fileText.files[0];
        reader.readAsText(file, "utf-8"); // 将文件以 UTF-8 编码读取为文本
        reader.onload = function () {
            fileResult.innerHTML = reader.result;
        }
    }

    fileBinary.onchange = function () {
        var file = fileBinary.files[0];
        reader.readAsBinaryString(file);
        reader.onload = function () {
            fileResult.innerHTML = reader.result;
        }
    }

    fileImage.onchange = function () {
        var file = fileImage.files[0];
        reader.readAsDataURL(file);
        reader.onload = function () {
            fileResult.innerHTML = ''
        }
    }
}