如何使用h5+js实现本地文件读取和写入

小编给大家分享一下如何使用h5+js实现本地文件读取和写入，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联专注于同仁网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供同仁营销型网站建设，同仁网站制作、同仁网页设计、同仁网站官网定制、小程序开发服务，打造同仁网络公司原创品牌,更为您提供同仁网站排名全网营销落地服务。

代码如下:

读取本地文件

Document

写入文件

HTML5中与FileReader相对应的也有一个FileWriter,FileReader可以被Chrome、FF和Safari都支持。要求一定版本以上的。但是FileWriter似乎只有被Chrome支持.

代码如下:

//首先导入一个Js文件//HTML中添加一个导出元素//JS文件$("#export).click(function(){

varcontent="这是直接使用HTML5进行导出的";

varblob=newBlob([content],{type:"text/plain;charset=utf-8"});

saveAs(blob,"file.txt");//saveAs(blob,filename)

});

读取本地文件路径代码

在获取文件路径的遇到些问题，由于安全原因，新版的浏览器都不支持直接获取本地URL，在网上找了些方法，如下：

Document

//FX获取文件路径方法

functionreadFileFirefox(fileBrowser){try{

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

}catch(e){

alert('无法访问本地文件，由于浏览器安全设置。为了克服这一点，请按照下列步骤操作：(1)在地址栏输入"about:config";(2)右键点击并选择New->Boolean;(3)输入"signed.applets.codebase_principal_support"（不含引号）作为一个新的首选项的名称;(4)点击OK并试着重新加载文件');return;

}varfileName=fileBrowser.value;//这一步就能得到客户端完整路径。下面的是否判断的太复杂，还有下面得到ie的也很复杂。

varfile=Components.classes["@mozilla.org/file/local;1"]

.createInstance(Components.interfaces.nsILocalFile);try{//Backslashesforwindows

file.initWithPath(fileName.replace(/\//g,"\\\\"));

}catch(e){if(e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH)throwe;

alert("File'"+fileName+"'cannotbeloaded:relativepathsarenotallowed.Pleaseprovideanabsolutepathtothisfile.");return;

}if(file.exists()==false){

alert("File'"+fileName+"'notfound.");return;

}returnfile.path;

}//根据不同浏览器获取路径

functiongetvl(obj){//判断浏览器

varSys={};varua=navigator.userAgent.toLowerCase();vars;

(s=ua.match(/msie([\d.]+)/))?Sys.ie=s[1]:

(s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]:

(s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]:

(s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]:

(s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0;varfile_url="";if(Sys.ie<="6.0"){//ie5.5,ie6.0

file_url=obj.value;

}elseif(Sys.ie>="7.0"){//ie7,ie8

obj.select();

file_url=document.selection.createRange().text;

}elseif(Sys.firefox){//fx

//file_url=document.getElementById("file").files[0].getAsDataURL();//获取的路径为FF识别的加密字符串

file_url=readFileFirefox(obj);

}elseif(Sys.chrome){

file_url=obj.value;

}//alert(file_url);

document.getElementById("text").innerHTML="获取文件域完整路径为："+file_url;

}

JS获取文件域完整路径的方法，兼容不同浏览器

以上代码在IE678均正常使用，在IE9下，document.selection.createRange()拒绝访问，看来安全性有所提高。

最后测试发现，在IE9下，如果file控件获得焦点，则document.selection.createRange()拒绝访问，

因此，只需要在obj.select()后面加一句obj.blur()即可。

elseif(Sys.ie>="7.0"){//ie7,ie8

obj.select();

obj.blur();

file_url=document.selection.createRange().text;

}

//obj=document.getElementById("file");

看完了这篇文章，相信你对“如何使用h5+js实现本地文件读取和写入”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

标题名称：如何使用h5+js实现本地文件读取和写入
链接分享：http://cdxtjz.com/article/pcopec.html

如何使用h5+js实现本地文件读取和写入

JS获取文件域完整路径的方法，兼容不同浏览器

其他资讯