区分 window.URL.createObjectURL() 和 FileReader.readAsDataURL()

最新推荐文章于 2024-11-13 10:32:23 发布

huoren_no1

最新推荐文章于 2024-11-13 10:32:23 发布

阅读量1.6k

点赞数 5

分类专栏： HTML JS 文章标签： html5

本文链接：https://blog.csdn.net/huoren_no1/article/details/108335827

版权

JS 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

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) 依次返回，没有影响