MENU

文章目录

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

2019 年 12 月 04 日 • 开发

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

HTML

<div>
    <h2>文本:</h2>
    <input type="file" id="file-text" accept="*" />
</div>
<div>
    <h2>二进制:</h2>
    <input type="file" id="file-bin" accept="*" />
</div>
<div>
    <h2>图像:</h2>
    <input type="file" id="file-image" accept="image/*" />
</div>
<div id="result" style="white-space: pre;"></div>

JavaScript

/* 选择文件 */
var FileText = document.querySelector("#file-text");
var FileBinary = document.querySelector("#file-bin");
var FileImage = document.querySelector("#file-image");
/* 结果 */
var Result = document.querySelector("#result");
/* 检测是否支持 FileReader */
if (typeof(FileReader) === "undefined") {
    result.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() {
            Result.innerHTML = reader.result;
        }
    }
    FileBinary.onchange = function() {
        var file = FileBinary.files[0];
        reader.readAsBinaryString(file);
        reader.onload = function() {
            Result.innerHTML = reader.result;
        }
    }
    FileImage.onchange = function() {
        var file = FileImage.files[0];
        reader.readAsDataURL(file);
        reader.onload = function() {
            Result.innerHTML = '<img src="' + reader.result + '" style="width: 100%;" />'
        }
    }
}
最后编辑于: 2020 年 07 月 10 日
返回文章列表 打赏
本页链接的二维码
打赏二维码