前端读取文件图片信息流；js读取图片不同信息流；js读取图片；前端就js读取二进制数据；前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件；

原文链接

FileReader来把文件读入内存，并且读取文件中的数据。
readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL,
DataURL 可直接赋值给 img.src。

FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法：

–1.1调用 reader. readAsArrayBuffer, 则 result 为 ArrayBuffer 对象调用 reader.
–1.2 readAsText, 则 result 为字符串调用reader. readAsDataURL, 则 result 为
–1.3DataURL, DataURL 可直接赋值给 img.src 调试发现 DataURL 是带头信息(/image) 的
base64(可能是) 编码的字符串

以下代码可直接复制：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title>
</head><body><p><label>请选择一个文件：</label><input type="file" id="file" /><input type="button" value="读取图像" onclick="readAsDataURL()" /><input type="button" value="读取二进制数据" onclick="readAsBinaryString()" /><input type="button" value="读取文本文件" onclick="readAsText()" /></p><div id="result" name="result"></div><script type="text/javascript">var result = document.getElementById("result");var file = document.getElementById("file");//判断浏览器是否支持FileReader接口if (typeof FileReader == 'undefined') {result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";//使选择控件不可操作file.setAttribute("disabled", "disabled");}function readAsDataURL() {//检验是否为图像文件var file = document.getElementById("file").files[0];if (!/image\/\w+/.test(file.type)) {alert("看清楚，这个需要图片！");return false;}var reader = new FileReader();//将文件以Data URL形式读入页面reader.readAsDataURL(file);// reader.onload = function (e) {//   var result = document.getElementById("result");//   //显示文件//   result.innerHTML = '<img src="' + this.result + '" alt="" />';// }reader.onload = function (e) {result.innerHTML = '' //清除其他内容var txt = e.target.result;var img = document.createElement("img");img.src = txt; //将图片base64字符串赋值给img的srcdocument.getElementById("result").appendChild(img);console.log(document.getElementById("result"), img);};}function readAsBinaryString() {var file = document.getElementById("file").files[0];var reader = new FileReader();//将文件以二进制形式读入页面reader.readAsBinaryString(file);reader.onload = function (f) {var result = document.getElementById("result");//显示文件result.innerHTML = this.result;}}function readAsText() {var file = document.getElementById("file").files[0];var reader = new FileReader();//将文件以文本形式读入页面reader.readAsText(file);reader.onload = function (f) {var result = document.getElementById("result");//显示文件console.log(this);result.innerHTML = this.result;}}</script></body></html>