HTML 5 关于文件读取学习笔记

对象URL也被称为blob URL，指的是引用保存在File或Blob中数据的URL。使用对象URL的好处是，我们没有必要去调用File Reader就可以读取到对应的数据。为了创建对象URL，可以使用window.URL.createObjectURL()方法创建，并传入一个File或Bolb对象。其兼容的处理方案如下：

复制

  
  
function createObjectURL(blob) {
    if(window.URL) {
        return window.URL.createObjectURL(blob);
    }else if(window.webkitURL) {
        return window.webkitURL.createObjectUrl(blob);
    }else {
        return null;
    }
}

以下是一个示例，通过blob插入到img标签中：

HTML代码

复制

  
  
<label for="imageList">请选择文件<input type="file" id="imageList" multiple name="image" accept="image/*" /></label>
<p id="imageRemark">暂无内容</p>

JS 代码

复制

  
  
window.addEventListener('load',function(){
    var imageList = document.getElementById('imageList'),
        imageRemark = document.getElementById('imageRemark');
 
    imageList.addEventListener('change',function(e){
        if(!this.files.length) return ;
 
        var url = null,
                i= 0,
                l=this.files.length,
                html = '';
        for(;i<l;i++){
            url = createObjectURL(this.files[i]);
            if(url) {
                html+= '<img src=\"' + url +'\"/>';
            }
            url = null;
        }
 
        imageRemark.innerHTML = html;
 
    },false);
},false);

以上代码中，其实是直接读取图片文件放入到内存中，然后创建对象URL来形成内存中的引用。直接插入到img标签上，相比用FileReader来讲，效率确实高出很多。但由于文件读取是放在内存中，如果存在对图片的引用，那么图片占用的内存就不会被释放。要手动去清除内存的话，就可以直接把对象URL当作参数的形式传给window.URL.revokeObjectURL()。由于不同浏览器带的前缀不同，所以就有了以下的兼容函数：

复制

  
  
function revokeObject(url){
    if(window.URL) {
        window.URL.revokeObjectURL(url);
    } else if(window.webkitURL) {
        window.webkitURL.revokeObjectURL(url)
    }
}