本文介绍HTML5 FileReader对象的四种文件读取方法：readAsBinaryString、readAsDataURL、readAsText和readAsArrayBuffer。通过实例演示如何利用FileReader实例处理文件数据，并解析onerror、onprogress、onload等关键事件，帮助开发者掌握前端文件读取的核心技术。
HTML5 FileReader对象读取文件方法详解
本文通过具体实例，详细解析了JavaScript结合HTML5中FileReader对象的使用方法，供读者参考学习。
FileReader实例提供了四种用于读取文件数据的方法。
这四种方法分别是：1、readAsBinaryString(Blob|File)；2、
readAsDataURL(Blob|File)；3、
readAsText(Blob|File)；4、
readAsArrayBuffer(Blob|File)。
此外，FileReader实例还包含多个事件处理机制，包括onerror、onprogress以及onload（其中result属性用于获取读取结果）。
<input name="file" id="uploadFile" />
var file = document.getElementById("uploadFile");
var bufferSize = 1024;
var pos = 0;
var onload = function(e) {
console.log("Read", e.target.result);
var img = document.createElement("img");
img.src = e.target.result;
img.width = 300;
img.height = 300;
document.body.appendChild(img);
};
var onerror = function() {}
var onprogress = function(e) {}
file.onchange = function() {
if (file.files) file = file.files[0];
while (pos < file.size) {
var reader = new FileReader();
reader.onload = onload;
reader.onerror = onerror;
/*reader.readAsText(file.slice(pos, bufferSize));
pos += bufferSize; */
reader.readAsDataURL(file);
pos = file.size + 1;
}
}
如需了解更多JavaScript相关知识，建议查阅本站专题：《JavaScript扩展技巧总结》、《JavaScript文件与目录操作技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望上述内容能对大家的JavaScript编程实践提供有益帮助。