区分 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() 方法来释放
  • 示例:预览图片


<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 属性
  • 注意

    • 该方法是异步操作
  • 示例:多图预览


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

参考资料

  • window.URL.createObjectURL — MDN
  • FileReader.readAsDataURL() — MDN
  • base64 — 百度百科
  • 二进制对象:Blob、File

你可能感兴趣的:(HTML,JS,html5)