saber酱的抱枕

Fly me to the moon

12/29
08:00
学习

使用URL.createObjectURL创建url对象

今天发现了window.URL.createObjectURL这个东西,非常的好用啊。

语法如下:

objectURL = URL.createObjectURL(blob || file);

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象。

我们可以使用URL.createObjectURL()方法给file对象或blob对象创建一个url来使用它。

blob对象产生的url格式如下:

blob:null/c694da24-ecd6-48ee-9a21-4c2979e6ef84

在处理本地数据时,它是很有用的,比如说上传前预览。

下面代码展示了一个表单,我们想用它上传图片和声音文件。

<form id="form1">
	<input type="file" name="img">
	<input type="file" name="audio">
</form>
<img src="" id="preview" width="300">
<audio autoplay="autoplay" controls="controls" src=""></audio>
<script>
	document.querySelector("#form1 input[name=img]").addEventListener("change",function(){
		var img=this.files[0];
		var imgUrl=window.URL.createObjectURL(img);
		document.querySelector("#preview").src=imgUrl;
	})

	document.querySelector("#form1 input[name=audio]").addEventListener("change",function(){
		var audio=this.files[0];
		var audioUrl=window.URL.createObjectURL(audio);
		document.querySelector("audio").src=audioUrl;
	})
</script>

在页面上有一个空的img元素和audio元素,在用户选择了图片或音乐后,该图片或音乐会直接显示/播放。是不是很方便呢?

你可以在下面直接操作:(第一个按钮传图片,第二个按钮传音乐)





虽然blob对象是个很方便的东西,但需要注意的是,当页面被关闭时,这个页面上生成的blob对象会被浏览器自动释放(清空)(但刷新页面不会清空blob对象),给它创建的url也就失效了。


此外有个URL.revokeObjectURL方法,用于释放blob对象的url。语法如下:

window.URL.revokeObjectURL(objectURL);

更加详细的信息可以参考此处

使用URL.createObjectURL创建url对象