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系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
Vue实现日历小插件
Jun 26 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php支付宝接口用法分析
2015/01/04 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python实现拼接多张图片的方法
2014/12/01 Python
python 网络编程详解及简单实例
2017/04/25 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
.net开发工程师面试题
2014/02/25 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
对祖国的寄语大全
2014/04/11 职场文书
村委会换届选举方案
2014/05/03 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
施工安全汇报材料
2014/08/17 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers