区分 window.URL.createObjectURL() 和 FileReader.readAsDataURL()
易衡
URL.createObjectURL()
-
语法
objectURL = URL.createObjectURL(object);
-
参数
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象
-
返回值
一个DOMString包含了一个对象URL，该URL可用于指定源 object 的内容
-
作用
- 该方法生成一个 URL 对象可以直接赋值给 DOM 元素的 src 属性
- 该方法生成一个 URL 对象还可以作为
a标签的href属性值，用于下载或链接到指定文件
-
注意
- 每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象（即使是对同一对象多次调用）
- 不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放
-
示例：预览图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预览图片</title>
<script>
window.onload = () => {
const fileElem = document.getElementById("fileElem"),
img = document.getElementById("img"),
file = fileElem.files[0],
url = window.URL.createObjectURL(file)
fileElem.addEventListener('change', ()=>{
img.src = url
}, false)
}
</script>
</head>
<body>
<input type="file" id="fileElem" accept="image/*">
<img id="img" src="" width="400px">
</body>
</html>
FileReader.readAsDataURL()
-
语法
instanceOfFileReader.readAsDataURL(blob);
-
参数
即将被读取的 Blob 或 File 对象
-
返回值
一个DOMString包含了一个对象URL，该URL可用于指定源 object 的内容
-
作用
- 读取指定的 Blob 或 File 对象
- 读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件
- 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容
- result 属性值可作为 DOM 元素的 src 属性
-
注意
- 该方法是异步操作
-
示例：多图预览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多图预览</title>
<script>
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild( image );
}, false);
reader.readAsDataURL(file);
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
</script>
</head>
<body>
<input id="browse" type="file" onchange="previewFiles()" accept="image/*" multiple>
<div id="preview"></div>
</body>
</html>
3. 对比
-
返回值
FileReader.readAsDataURL(blob)可以得到一段base64编码的字符串
URL.createObjectURL(blob)得到的是当前文件的一个内存url
-
内存清理
FileReader.readAsDataURL(blob)依照js垃圾回收机制自动从内存中清理
URL.createObjectURL(blob)存在于当前document内，清除方式只有upload()事件或者revokeObjectURL()手动清除
-
执行方式
FileReader.readAsDataURL(blob)通过回调的方式返回，异步执行
URL.createObjectURL(blob) 直接返回，同步执行
-
多文件处理
FileReader.readAsDataURL(blob)同时处理多个文件时，需要一个文件对应一个FileReader对象
URL.createObjectURL(blob) 依次返回，没有影响
参考资料
类似资料：