Saber 酱的抱枕

Fly me to the moon

12/29
2016
学习

使用URL.createObjectURL创建url对象

saber 撰写 无回复 8,809次查看

今天发现了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对象