js读写php文件,在js中如何读取本地文件
下面我就为大家分享一篇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("");
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("
"+index+"----"+item.url+"
")
})
})
使用jQuery 的promise对象改写
这种方式的好处是可以使用链式写法,并且可以绑定多个done事件处理函数,执行顺序按照绑定顺序。function LocalFileUrl(){
this.dtd ={};
this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
$("body").append("");
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("
"+index+"----"+item.url+"
")
})
}).done(function(){
console.log("完成");
}).done(function(){
alert("已经读取了本地文件路径");
})
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
js读写php文件,在js中如何读取本地文件相关推荐
- java访问本地文件_详解Java读取本地文件并显示在JSP文件中
详解Java读取本地文件并显示在JSP文件中 当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相 ...
- cordova js(javascript)读取本地文件(将本地的bin文件转成字节数组)
此问题已经解决,解决方法参考我的博客: cordova本地存储(存取): 读取项目里的本地文件 文章目录 1.下面两个比较有用: 2.下面两篇博客证明不用input标签的情况下,无法获取本地文件(包括 ...
- JS学习--用JS读取本地文件
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- html js引用本地资源,了解使用JavaScript读取本地文件的方法
本篇文章给大家介绍一下使用JavaScript读取本地文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件.如 ...
- js读取本地文件和写入本地文件
读取本地文件: <!doctype html> <html lang="en"> <head><meta charset="UT ...
- js调用文件服务器出现跨域,js 读取本地文件遇到ajax跨域问题
环境:win10 语言:js 对象:easyUI SKD demo 级别:小小白级 本篇博文记录博主从js小小白的进化历程,下述问题对老鸟来说再简单不过,但是作为新手一定会经历这样的阶段,所以还是分享 ...
- QListWidget读取本地文件夹中文件并显示名字,双击读取xml数据
文章目录 前言 一.读取本地文件并显示 二.双击读取数据 前言 本文主要是为了解决QListWidget读取本地文件夹中文件,并且显示的问题.然后双击读取其中xml数据 一.读取本地文件并显示 如下的 ...
- python按列读取txt文件_如何使用pandas读取txt文件中指定的列(有无标题)
最近在倒腾一个txt文件,因为文件太大,所以给切割成了好几个小的文件,只有第一个文件有标题,从第二个开始就没有标题了. 我的需求是取出指定的列的数据,踩了些坑给研究出来了. import pandas ...
- java接收并存储文件_客户端读取本地文件的数据,发送到服务器,服务器接收并存储到文件中...
只实现了传送文件的功能. 编写Socket客户端和服务器程序,客户端读取本地文件的数据,发送到服务器,服务器接收并存储到文件中. 消息格式: 字段 长度(单位字节) 内容 -------------- ...
最新文章
- 面向对象--第三部分
- pyecharts 应用5:视觉映射配置项VisualMapOpts
- linux指向域同步时间,linux在局域网下设置时间同步
- 雷林鹏分享:YAF 在Nginx环境下的Rewrite规则
- @ConfigurationProperties和@Value不同的使用场景,@Bean添加组件 (6.spring boot配置文件注入)...
- Java学习,继承关系的学习和理解
- C++子类和父类,引用类和被引用类之间的顺序关系
- 五个免费数据采集工具网站
- java treemap排序_java – 使用TreeMap排序问题
- 小程序云开发实战:从零搭建科技爱好者周刊小程序
- AI:大力出奇迹?Bigger is better?AI下一代浪潮?—人工智能的大语言模型(LLMs)/预训练大模型的简介、发展以及未来趋势
- 解决服务器上传的tar格式的中不可以解压tar格式的压缩包 zip解压中文会在文件中显示乱码
- 数学概念: 导数和切线方程
- 如何使用正则表达式?
- 如何有效的避免图片侵权(100%避免网站图片侵权)
- 【C51单片机】交通红绿灯设计(仿真)
- Kotlin-简约之美-基础篇(三):基本控制语句
- Oracle 插入insert语句
- BuddyPress汉化中文语言包 BuddyPress汉化教程步骤
- 菊花+红枣+枸杞的配茶法
热门文章
- svn管理工具_主流代码管理工具深度评测
- Git fetch pull 详解
- 大华热成像netsdkdemo_千年博物,智慧展馆丨大华股份全力守护“华夏珍宝库”...
- she is so css什么意思,输入she is so什么意思 微信she is so什么梗
- Java包hashCode()方法及示例
- php语言冒泡法,PHP实现冒泡排序算法的案例
- php curl_error源码,PHP curl_error函数
- python文件封装成jar_【Python】Python文件打包为可执行文件
- Spring中的重试功能!嗯,有点东西
- 开篇词:如何轻松获得 Offer