Document  

  

h5+js实现本地文件读取和写入

  代码如下:
 
  读取本地文件
 
  
 
  <!doctypehtml><htmllang="en"><head>
 
  <metacharset="UTF-8">
 
  <title>Document</title></head><body>
 
  <p>
 
  <inputtype="file"id="files"style="display:none"onchange="fileImport();">
 
  <inputtype="button"id="fileImport"value="导入">
 
  </p>
 
  <scriptsrc="../js/jQuery/jquery-1.11.1.js"></script>
 
  <script>
 
  //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
 
  $("#fileImport").click(function(){
 
  $("#files").click();
 
  })functionfileImport(){//获取读取我文件的File对象
 
  varselectedFile=document.getElementById('files').files[0];varname=selectedFile.name;//读取选中文件的文件名
 
  varsize=selectedFile.size;//读取选中文件的大小
 
  console.log("文件名:"+name+"大小:"+size);varreader=newFileReader();//这是核心,读取操作就是由它完成.
 
  //reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
 
  reader.onload=function(){//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
 
  console.log(this.result);
 
  }
 
  }</script></body></html>
 
  写入文件
 
  HTML5中与FileReader相对应的也有一个FileWriter,FileReader可以被Chrome、FF和Safari都支持。要求一定版本以上的。但是FileWriter似乎只有被Chrome支持.
 
  代码如下:
 
  //首先导入一个Js文件<scripttype="text/javascript"src="./JS/FileSaver.js"charset="utf-8"></script>//HTML中添加一个导出元素<inputtype="button"id="export"value="导出"/>//JS文件$("#export).click(function(){
 
  varcontent="这是直接使用HTML5进行导出的";
 
  varblob=newBlob([content],{type:"text/plain;charset=utf-8"});
 
  saveAs(blob,"file.txt");//saveAs(blob,filename)
 
  });
 
  读取本地文件路径代码
 
  在获取文件路径的遇到些问题,由于安全原因,新版的浏览器都不支持直接获取本地URL,在网上找了些方法,如下:
 
  
 
  
 
  <!doctypehtml><htmllang="en"><head>
 
  <metacharset="UTF-8">
 
  <title>Document</title></head><body><scripttype="text/javascript">
 
  //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;
 
  }</script><h1>JS获取文件域完整路径的方法,兼容不同浏览器</h1><pid="text"style="color:#f00;"></p><inputtype="file"id="file"onchange="getvl(this)"/></body></html>
 
  以上代码在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");





本文转载自中文网

推荐阅读