图片预览效果
还是先直接给出 demo 吧，大家可以运行这个 demo 先来看一下效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blob-fileRender</title>
<style>
#prev1, #prev2 {
height: 400px;
width: 100%;
}
img {
height: 100%;
}
</style>
</head>
<body>
<div id="prev1">
<input type="file" id="file1" accept="image/*">
<br>
<img src="" alt="" id="view1">
</div>
<br><br>
<div id="prev2">
<input type="file" id="file2" accept="image/*">
<br>
<img src="" alt="" id="view2">
</div>
<script>
document.getElementById("file1").addEventListener('change', function(){
var files = this.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/png$|jpeg$/.test(file.type)) {
document.getElementById('view1').src = URL.createObjectURL(file);
} else {
alert("Please choose an image file with jpg jpeg png.");
}
} else {
alert("Please choose image file");
}
}, false);
document.getElementById("file2").addEventListener('change', function(){
var files = this.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/png$|jpeg$/.test(file.type)) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('view2').src = e.target.result;
};
reader.readAsDataURL(file);
} else {
alert("Please choose image file with jpg jpeg png.");
}
} else {
alert("Please choose image file");
}
}, false);
</script>
</body>
</html>
可以保存这个 html 文件，然后打开。
这里面有两个选择文件的按钮，都实现了选中图片，然后实时预览的效果。但是实现的细节并不一样。
分别使用了 URL 和 FileReader 来实现的。
FileReader
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中 File 对象可以是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象，也可以来自拖放操作生成后的 DataTransfer 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。
想要创建一个 FileReader 对象，很简单，如下：
var reader = new FileReader();
FilerReader 对象有以下方法和事件：
方法概述
abort()；
readAsArrayBuffer()；
readAsBinaryString()；
readAsDataURL()；
readAsText()；
事件处理程序
onabort；
onerror；
onload；
onloadend；
onloadstart；
onprogress；
关于 方法概述 和 事件处理程序 的详细使用细则，建议大家阅读这篇较为官方的文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
URL
在现代浏览器中，有 URL 这个对象，可以直接使用：
URL.createObjectURL(file);
为了兼容性考虑，我们可以这样：
var URL = window.URL || window.webkitURL;
这个 URL 提供了用于创建和管理对象 URLs 的静态方法。它也可以作为一个构造函数被调用来构造 URL 对象。
语法
调用一个静态方法：
img.src = URL.createObjectURL(blob);
构造一个新对象：
var url = new URL("../cats/", "https://www.example.com/dogs/");
Blob
一个 Blob 对象表示一个不可变的，原始数据的类似文件对象。Blob 表示的数据不一定是一个 JavaScript 原生格式。 File 接口基于 Blob ，继承 blob 功能并将其扩展 为支持用户系统上的文件。
正因为如此，所以，我们可以在 URL.createObjectURL(blob); 这个方法中直接传入 File 对象。
要构造一个 Blob 从其他非 blob 对象和数据，请使用 Blob() 构造函数。要创建一个包含另一个 blob 的数据子集的 blob ， 请使用 clice() 方法。要从用户文件系统上的一个文件中获取一个 Blob 对象，请参阅 File 文档。
关于 Blob 的详细介绍请查阅：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
Tip
URL.revokeObjectURL 方法 Opera 不支持，FileReader 除 IE9 及以下不支持，其它浏览器都支持。
-------------------------------- (完)-------------------------------------- 我的 个人网站：https://neveryu.github.io/guestbook/ Github: https://github.com/Neveryu
有问题可以私信我的微博或者给我发邮件…
2076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
