js读取本地文件的实例


Posted in Javascript onDecember 22, 2017

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

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

由于浏览器安全策略的限制,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 相关文章推荐
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
jQuery中库的引用方法
Jan 06 jQuery
vue项目实战总结篇
Feb 11 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 #Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 #Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 #Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 #Javascript
JavaScript实现单例模式实例分享
Dec 22 #Javascript
vue使用axios时关于this的指向问题详解
Dec 22 #Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python对excel文档的操作方法详解
2018/12/10 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
自动化专业个人求职信范文
2013/11/29 职场文书
社团活动总结报告
2014/06/27 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
唐山大地震观后感
2015/06/05 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技