H5图片预览_本地图片预览的两种实现方式FileReader和URL_createObjectURL详解-moshine前端
2017-01-08 01:18

   随着H5的推进,web前端能使用的功能越来越多,svg,canvas,webGL,localStorage,Blob,FileReader,URL,worker,promise,dataTransfer等等很多H5新特性给我们在现代浏览器以及移动端的开发带来了极大的方便,前提是你需要下一定的学习成本掌握这些新技术。今天我们就通过实现H5的图片预览功能来说说其中的两个对象:FileReader,URL。

FileReader:

  这个对象能让web应用异步读取用户本地电脑上的文件内容,FileReader可以从用户选择的input file对象中获取FileList对象,也可以从drag和drop操作的dataTransfer对象,和canvas对象的mozGetAsFile API中获取file对象。

构造方法:

FileReader()-返回一个新建的FileReader对象。如下

var reader=new FileReader();


属性:

 @1:FileReader.error

 只读,当读取文件发生错误时返回的错误信息。

@2:FileReader.readyState

只读,表示FileReader对象的当前状态,可以是以下值

EMPTY0还没有加载数据
LOADING
1数据正在加载中
DONE2数据已经加载完成

@3:FileReader.result

返回文件的内容,只有当读取方法调用并且读取完成时,此属性才能用。


事件:

@1:FileReader.onabort

    读取发生中断时触发此事件。

@2:FileReader.onerror

  读取发生错误时触发此事件。

@3:FileReader.onload

  读取成功完成时触发此事件。

@4:FileReader.onloadstart

   读取开始时触发此事件。

@5:FileReader.onloadend

  读取结束时触发此事件,不论读取成功与否。

@6:FileReader.onprogress

  读取进行时触发此事件。


方法:

@1:FileReader.abort()

     中断读取,此时readyState将改变为DONE。

@2:FileReader.readAsArrayBuffer()

   读取文件,并作为一个ArrayBuffer对象返回。

@3:FileReader.readAsBinaryString()

   读取文件,并范围一个由文件二进制数据转化成的String字符串。

@4:FileReader.readAsDataURL()

  读取文件,并范围一个引用文件内容的URL对象。

@5:FileReader.readAsText()

  读取文件,并范围一个text string文本字符串类型。


以上就是FileReader的API介绍,兼容性如下:

FileReader.png

可以看出,在IE10+浏览器中对FileReader支持是良好的。兼容性表格中的最后一行是FileReader在Worker中运行的支持程度,Worker是H5中多线程的概念,这里用不到,不用去管它。

有了FileReader方法,我们就用它来实现一个本地图片预览功能,来体会一下FileReader对象的用法。

<input type="file" id="mfile" multiple 
    accept="image/gif,image/jpeg,image/png" 
    onchange="showimage(this)" 
    style="position:absolute;clip:rect(0 0 0 0)"/>
<br/><br/>
<label for="mfile" class="lb">select File</label>
<div class="img_cont" id="cont">

</div>

创建好HTML结构,input file用来让用户选取文件,通过其onchange事件来处理其中的files对象,div容器用来预览图片。

lable标签通过for属性指向input file控件,点击label就能实现点击input file的作用,这里input控件必须要显示,可以通过clip让它看不见,clip要想使元素起作用,必须设置absolute定位,此方法的原型是:

clip: rect (top, right, bottom, left);

也可以通过left:-9999em;让它超出文档视图范围。

下面定义showimage方法:

var cont=document.getElementById("cont");
function showimage(fl){
   var files=fl.files;
    if(files.length){
       for(var i=0;i<files.length;i++){
         //var img=document.createElement("img");
          var img=new Image();
          img.className="preimg";
          cont.appendChild(img);
          var reader=new FileReader();
          reader.onload=function(event){
            //img.src=event.target.result;
              img.src=reader.result;
          }
         var url=reader.readAsDataURL(files[i]);
        }
    }
}

@1:

   通过fileobj.files获取input file控件中的FileList集合。如果有length属性,则其中有file文件。

@2:

   遍历FileList集合,创建一个img对象,可以通过new Image()和createElement("img")两种方式来创建img对象,并将img对象添加到预览div中。

@3:关键

   创建FileReader对象,通过readAsDataURL读取文件作为一个URL对象,可以赋值给img的src属性上,达到显示图片的效果。read**()系列方法都是异步操作,所以要等待文件读取完成后才能设置img的src属性。需要监听FileReader的onload事件,其回调函数含有一个event对象,可以通过event.target.result获取url地址,也可以直接通过reader.result属性获取url地址。

  效果如下:

 preViewer.png

看效果图不过瘾,你可以点击这里查看FileReader的图片预览效果

createObjectURL()获取图片路径

通过FileReader方法实现图片预览是一个比较常见的方式,在H5中还有一种方式可以实现图片预览,那就是利用URL对象createObjectURL()得到File文件的数据的url引用。

URL的构造方法:

var url=new URL(urlstrign,[baseurlstring]);

构造方法会创建一个url对象,但是IE不支持,而预览图片我们也用不到,我们需要用到的是URL的两个static静态方法。

URL.createObjectURL(blob);
URL.revokeObjectURL();

createObjectURL(blob),把一个File对象或者Blob对象创建一个URL对象。revokeObjectURL(URL).释放由createObjectURL方法创建的URL对象,以便释放浏览器内存。

通过URL方法获取URL看来比FileReader对象更简便。

代码如下:

var img=new Image();
img.className="preimg";
cont.appendChild(img);
var url= URL.createObjectURL(files[i]);
img.onload=function(){
    URL.revokeObjectURL(this.src);
}
img.src=url;


这里通过createObjectURL创建的是一个对象的url引用,与FileReader的不同,并没有加载数据,所以要找img的onload事件中,保证img对象显示了图片后才能调用revokeObjectURL方法来释放创建的URL对象。

上面两种方法都可以实现图片预览的效果。而FileReader对象的适用范围更广,不光是为了创建图片预览,还可以读取文件进行异步文件上传等功能。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(4297)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1