Question

我找到了一张图片上传预览代码，我对FileRead()中发生的事情感到困惑？

var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function() {
        var dataURL = reader.result;
        var output = document.getElementById('output');
        console.log(dataURL)
        output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
};

Answer 1

.readAsDataURL()将表示文件数据的网址返回为 base64编码的字符串
.readAsArrayBuffer()返回表示文件的ArrayBuffer 数据
.readAsText()将文件的数据作为文本字符串返回。

有关详情，请查看this FileReader doc。

Answer 2

readAsDataURL()将返回一个字符串，该字符串可以粘贴到HTML标记的url属性中（例如：img中的src=）。对于img标记，这将有效地显示图像，就像src是读取的文件的地址一样。它是原始文件内容的转换（更大）。

readAsText()将返回一串字符，这些字符可以由JavaScript函数解析或显示在textarea中，并且可能被用户理解。这通常用于读取文本文件。

Answer 3

我想，如果您要具有文件上传功能，然后向用户显示他们从PC上选择并准备上传的文件的预览，请使用.readAsDataURL()。

如果要操作文本文件，请使用.readAsText()

如果您要操纵图像（例如将jpeg转换为PNG），请使用.readAsArrayBuffer()。

还有第四种方法.readAsBinaryString，但是Mozilla文档建议使用.readAsArrayBuffer()。

JavaScript FileReader中的readAsDataURL（）和readAsArrayBuffer（）以及readAsText（）之间的区别

3 个答案: