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 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python 寻找局部最高点的实现
2019/12/05 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
运动会广播稿200字
2014/01/15 职场文书
阳光体育活动总结
2014/04/30 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android