大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
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>
参考：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209988.html原文链接：https://javaforall.net
