HTML DOM createObjectURL() 方法

createObjectURL()方法是HTML DOM中Blob对象的方法，它用于创建一个指向Blob对象的URL，该URL在浏览器中可以直接使用，通常用于在下载文件时将文件上传到服务器之前的预览。

语法

  URL = window.URL || window.webkitURL;
  objectURL = URL.createObjectURL(blob);

参数

• blob，必须，创建URL所需的Blob对象。

返回值

createObjectURL()方法返回一个Blob对象的URL。

示例

HTML:

<input type="file" id="fileInput">
<img id="myImage">

JavaScript:

const fileInput = document.getElementById('fileInput');
const myImage = document.getElementById('myImage');

fileInput.addEventListener('change', function(e) {
  let file = e.target.files[0];
  let objectURL = URL.createObjectURL(file);
  myImage.src = objectURL;
});

此示例显示了如何使用createObjectURL()方法为用户选择的文件创建一个URL，以便使用<img>元素在页面上加载该文件的预览。

注意事项

• createObjectURL()方法创建的URL仅在当前页面选项卡关闭前有效。
• 请始终调用URL.revokeObjectURL()来释放URL对象的内存，以避免内存泄漏。
• createObjectURL()方法在支持Blob对象的浏览器中可用，如：IE10+，Edge，Firefox，Chrome，Safari等。

结论

createObjectURL()方法是HTML DOM中用于创建指向Blob对象的URL的方法。使用它，我们可以在浏览器中直接预览二进制数据或从服务器下载文件之前查看文件。使用此方法时，请务必注意内存泄漏问题，并使用浏览器的Blob对象支持情况进行测试。