您的位置：首页 > 其它

web预览本地图片（对象URL）

2016-11-29 20:27 169 查看

前段项目中有用到上传的功能，用的angular-file-upload插件，功能还蛮强大的，界面也很漂亮。当时有个需求是酱紫。添加到上传列表（还未上传时）可以预览图片，如果满意再上传。很遗憾的说我没搞出来，当时不知道h5 的file api，更不知道blob URL是什么鬼。怂怂地就跟“大哥”商量把需求改成上传后预览，点击预览的时候请求后台，返回服务器上的路径，并打开，这样肯定是ok的，但是与原需求不完全契合，feeling lost。

回家无意翻红宝书，看到H5新增的，File Api这部分有file reader的新对象，更有对象URL（blob URL），这才是这篇文章的主角，让之前的欠缺的功能得到解决。

对象URL（blob URL）指的是引用保存在File或者Blob中数据的URL。使用对象URL的好处死可以不必把文件内容取到JavaScript中而直接使用文件内容。为此，只要在需要文件内容的地方提供对象URL即可。要创建对象URL，可以使用window.URL.createObjectURL()方法，并传入File或者Blob对象。这个函数的返回值是一个字符串，指向一块内存的地址。因为这个字符串是URL，所以在DOM中也能使用，上demo。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
button{display: none;float:right;}
</style>
</head>
<body>
<input type="file" id='files-list' multiple name=""><button>预览下一张</button>
<div id='output'></div>
</body>
<script>
var filesList=document.getElementById('files-list');
var btn=document.getElementsByTagName('button')[0];
var output=document.getElementById('output');
var files=null;
var index=0;
filesList.addEventListener('change',function(event){
files=event.target.files,//取到files的对象并赋值。
console.log(files)
if(files.length>0){
btn.style.display='block';
}else{
btn.style.display='none';
}
btn.click();
})
btn.addEventListener('click',function(){
var num=files.length;

url=window.URL.createObjectURL(files[index]); //根据index创造对应的blob url对象
if(url){
if(/image/.test(files[index].type)){
output.innerHTML='<img src=\''+url+'\'>'
}else{
output.innerHTML="not an image"
}
}else{
output.innerHTML="your brower doesn"
}
if(index==num-1){//实现轮播
index=0;
}else{
index++;
}
})
</script>
</html>

通过以上方法，就能在真正上传到服务器之前，实现预览的效果。

但是在angularJs中

<input type='file'>

和ngchange有冲突，所以需要酱紫来转变一下

<input type="file" id='files-list' ng-model="image" onchange='angular.element(this).scope().test(event)'>

（注：在controller中已定义test方法），具体bug解决在这里

因为只要代码再引用对象URL，内存就不会释放，所以如果不在需要相应数据，最好手动释放。对应的方法是window.URL.revokeObjectURL()

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： url api 对象 web

相关文章推荐

新的分享

章节导航