本文介绍如何在浏览器端安全地读取并预览本地文件。通过input标签获取用户授权，利用File对象和URL.createObjectURL生成临时URL，实现图片、视频等资源的本地预览。文章提供了基于回调和jQuery Promise两种封装方式，并说明了IE10+的兼容性及资源释放方法。
浏览器端本地文件预览原理
如何在浏览器环境中实现本地文件的预览功能？
本文主要探讨利用浏览器技术预览本地文件的方法。
出于对用户信息安全的保护，浏览器实施了严格的安全策略，限制JavaScript程序直接访问本地资源。如果允许网络脚本随意访问用户主机文件，将带来严重的安全隐患。尽管存在这一限制，但在获得用户明确授权的前提下，浏览器仍允许访问本地资源。
获取用户授权的标准方式是通过HTML标签触发文件选择对话框，由用户手动指定文件，这实质上是用户授予访问权限的过程。随后，利用获取到的File对象，通过URL.createObjectURL(file)方法将其转换为文件URL，即可将该URL传递给img、video、audio等支持文件引用的HTML标签进行展示。本文还将本地文件转换为URL的功能封装为一个类。
function LocalFileUrl(){
var _this = this;
this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
$("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
this.urls=[];
var _this = this;
$("#" + this.input_id).change(function(e){
console.log("change");
//如果_this.urls 不为空,则释放url
if(_this.urls){
_this.urls.forEach(function(url,index,array){
URL.revokeObjectURL(url.url);//一经释放，马上将无法使用这个url的资源
});
_this.urls = [];
}
$(this.files).each(function(index,file){
var url = URL.createObjectURL(file);
_this.urls.push({url:url,file:file});
});
typeof _this.getted == 'function' && _this.getted(_this.urls);
})
}
/*
参数说明：getted:function(urls){}
urls是一个url对象数组。[url]
url = {
url:url, //选取的文件url
file:file //选取的文件对象引用
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
this.getted = getted;
$("#"+ this.input_id).click();
}基础实现与回调方式
具体使用步骤如下：
var localFileUrl = new LocalFileUrl();//实例化对象
//触发读取，弹出文件选择框，并且监听文件选择事件。
localFileUrl.getUrl(function(urls){
urls.forEach(function(item,index,array){
$("body").append("<div>"+index+"----"+item.url+"</div>")
})
})基于jQuery Promise的封装
采用jQuery的Promise对象对逻辑进行改写。
这种实现方式的优势在于支持链式调用，并且可以绑定多个done事件处理函数，这些函数的执行顺序严格遵循绑定的先后顺序。
function LocalFileUrl(){
this.dtd ={};
this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
$("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
this.urls=[];
var _this = this;
$("#" + this.input_id).change(function(e){
//如果_this.urls 不为空,则释放url
if(_this.urls){
_this.urls.forEach(function(url,index,array){
URL.revokeObjectURL(url.url);//一经释放，马上将无法使用这个url的资源
});
_this.urls = [];
}
$(this.files).each(function(index,file){
var url = URL.createObjectURL(file);
_this.urls.push({url:url,file:file});
});
//传入一个可选的参数数组
_this.dtd.resolveWith(window,new Array(_this.urls));
})
}
/*
返回一个jquery 的promise 对象，可以绑定done()事件。done(urls)接收一个urls数组
{
url:url,
file:file// 选取的文件对象
}
*/
LocalFileUrl.prototype.getUrl = function(){
this.dtd = $.Deferred();
$("#"+ this.input_id).click();
return this.dtd.promise();
}具体调用方式如下：
var localFilrUrl = new LocalFileUrl();
// 绑定done事件
localFileUrl.getUrl().done(function(urls){
urls.forEach(function(item,index,array){
$("body").append("<div>"+index+"----"+item.url+"</div>")
})
}).done(function(){
console.log("完成");
}).done(function(){
alert("已经读取了本地文件路径");
})兼容性与资源释放机制
关于浏览器兼容性：
URL.createObjectURL(File/Blob)目前仍属于实验性功能，主要兼容IE10及以上版本的浏览器。与之配套的是URL.revokeObjectURL(url)方法，用于通知浏览器不再需要该URL引用，从而释放相关资源。一旦调用该方法，对应的URL将立即失效。