脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js读取本地文件

js读取本地文件的实例

 更新时间：2017年12月22日 10:09:54   作者：BBQ只有番薯  
下面小编就为大家分享一篇js读取本地文件的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如何用在浏览器端预览本地文件？

今天的主题是使用浏览器预览本地文件。

由于浏览器安全策略的限制，javascript程序不能自由地访问本地资源，这是对用户信息安全来说，是一项不得不遵守的准则。假如网络上的javascript程序可以自如地访问用户主机的本地资源，那么浏览器用户将毫无安全可言。尽管有这个安全限制，但是在得到用户允许的情况下，浏览器还是可以访问本地资源的。

获得用户允许的方法就是通过标签来让用户手动选择文件，这一过程就是用户授予访问权限的过程。然后 使用获得File 对象通过URL.createObjectURL(file)转换为文件url, 就可以传递给类似y于img,video,audio等标签使用了。我将本地文件转换为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对象改写

这种方式的好处是可以使用链式写法，并且可以绑定多个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立即失效。

您可能感兴趣的文章:

相关文章

  • 怎么用javascript进行拖拽2

    怎么用javascript进行拖拽2

    怎么用javascript进行拖拽2...
    2006-07-07
  • JavaScript数据结构Number

    JavaScript数据结构Number

    这篇文章主要介绍了JavaScript数据结构Number，Number 是JavaScript的基本数据结构，是对应数值的应用类型，下文给大家分享JavaScript使用 Number 的常见问题,需要的朋友可以参考一下
    2022-02-02
  • 将URL地址都变成ooooooooo的神奇小工具使用介绍

    将URL地址都变成ooooooooo的神奇小工具使用介绍

    这篇文章主要为大家介绍了将URL地址都变成ooooooooo的神奇小工具使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • JavaScript 学习点滴记录

    JavaScript 学习点滴记录

    HTML DOM (Document Object Model文档对象模型) DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件. DOM是以层次结构组织的节点或信息片断的集合.
    2009-04-04
  • js实现网页多级级联菜单代码

    js实现网页多级级联菜单代码

    这篇文章主要介绍了js实现网页多级级联菜单代码,涉及javascript基于数组动态构造多级级联菜单的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • JavaScript 程序循环结构详解

    JavaScript 程序循环结构详解

    这篇文章主要为大家介绍了JavaScript 程序循环结构，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • js实现div色块拖动录制

    js实现div色块拖动录制

    这篇文章主要为大家详细介绍了js实现div色块拖动录制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js简单实现让文本框内容逐个字的显示出来

    js简单实现让文本框内容逐个字的显示出来

    逐个字显示效果就像是打印机一样，在某些情况下起到强调作用，下面有个不错的示例，大家可以学习下
    2013-10-10
  • 正则表达式优化JSON字符串的技巧

    正则表达式优化JSON字符串的技巧

    这篇文章主要介绍了正则表达式优化JSON字符串的技巧的相关资料,需要的朋友可以参考下
    2015-12-12
  • js中判断Object、Array、Function等引用类型对象是否相等

    js中判断Object、Array、Function等引用类型对象是否相等

    项目中有时会需要对引用类型进行比较，如常见的object和array，我们知道，引用类型无法直接使用 == 或=== 取得期待结果，因此需要一个迭代的compare函数转化成原始类型进行比较
    2012-08-08

最新评论