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

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

　　代码如下:

　　读取本地文件

　　

　　写入文件

　　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，在网上找了些方法，如下：

　　

　　//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")[xss_clean]="获取文件域完整路径为："+file_url;

　　}

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