使用FileReader对象的readAsDataURL方法来读取图像文件

全栈程序员站长

发布于 2022-11-17 01:47:42

1.8K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。

readAsDataURL获取的base64字符串如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......

使用Img显示图像文件

若想要将读取出来的图像文件，直接显示在网页上，您可以透过JavaScript建立一个标签，再设定src属性为Data URL，再将<img>标签加入DOM之中，例如以下范例所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function ProcessFile(e) { 

var file = document.getElementById('file').files[0];
if (file) { 

var reader = new FileReader();
reader.onload = function (event) { 

var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;//将图片base64字符串赋值给img的src
document.getElementById("result").appendChild(img);
};
}
reader.readAsDataURL(file);
}
function contentLoaded() { 

document.getElementById('file').addEventListener('change',
ProcessFile, false);
}
window.addEventListener("DOMContentLoaded", contentLoaded, false);
</script>
</head>
<body>
请选取一个图像文件: <input type="file" id="file" name="file"/>
<div id="result"></div>
</body>
</html>

参考：

使用FileReader对象的readAsDataURL方法来读取图像文件

FileReader用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法调用 reader. readAsArrayBuffer, 则 result 为 ArrayBuffer 对象调用 reader. readAsText, 则 result 为字符串调用reader. readAsDataURL, 则 result 为 DataURL, DataURL 可直接赋值给 img.src 调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串

FileReader接口的使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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="" />';
}
}
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");
//显示文件
result.innerHTML = this.result;
}
}
</script>
<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>
</body>
</html>