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 混淆加密收藏
Jan 16 Javascript
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 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
xajax写的留言本
2006/11/25 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
详解supervisor使用教程
2017/11/21 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
国庆节演讲稿
2014/05/27 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2015年体育部工作总结
2015/04/02 职场文书
基层工作经历证明
2015/06/19 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
改造DE1103三步曲
2022/04/07 无线电