使用javascript读写本地文件的方法

javascript cooljun 263℃ 0评论

File API是html5新标准,既可以读文件,也可以写文件,注意这里的

读文件:OS中文件系统中的文件 读到 浏览器页面 中

写文件:将 浏览器页面数据 写到 浏览器文件系统 中

参见博客:http://www.html5rocks.com/en/tutorials/file/dndfiles/

其中讲解很详细,不过读文件时用的是读图片。这里贴一份读文本的代码

  1.     <script type=“text/javascript” src=“ReadTest.js”>  
  2.     var a=new Array();  
  3.       
  4.     function handleFileSelect(evt) {  
  5.         var files = evt.target.files; // FileList object  
  6.         if(files[0])  
  7.         {  
  8.             var reader = new FileReader();  
  9.             reader.readAsText(files[0]);  
  10.             reader.onload = loaded;      
  11.         }  
  12.     }  
  13.       
  14.     function loaded(evt) {  
  15.         var fileString = evt.target.result;  
  16.         alert(fileString);  
  17.     }  
  18.     </script>  
  19.  </head>  
  20. <body>  
  21.     <input type=“file” id=“file” name=“files[]” multiple />  
  22.     <script type=“text/javascript”>  
  23.         var btn=document.getElementById(‘file’);  
  24.         btn.addEventListener(‘change’, handleFileSelect, false);      
  25.     </script>  
  26. </body>  
  27. </html>  

读文件用到FileReader接口,写文件使用FileWriter,写文件是要将 页面数据 写入到 浏览器的文件系统(root) 中,而我需要的是保存到 OS的文件系统中,所以采用另一种方法:先用BlobBuilder把要写入的数据合成Blob,创建表示Blob的URL,再根据不同浏览器选择保存策略,实际就是下载文件

JS文件:

  1. function doSave(value, type, name) {  
  2.     var blob;  
  3.     if (typeof window.Blob == “function”) {  
  4.         blob = new Blob([value], {type: type});  
  5.     } else {  
  6.         var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;  
  7.         var bb = new BlobBuilder();  
  8.         bb.append(value);  
  9.         blob = bb.getBlob(type);  
  10.     }  
  11.     var URL = window.URL || window.webkitURL;  
  12.     var bloburl = URL.createObjectURL(blob);  
  13.     var anchor = document.createElement(“a”);  
  14.     if (‘download’ in anchor) {  
  15.         anchor.style.visibility = “hidden”;  
  16.         anchor.href = bloburl;  
  17.         anchor.download = name;  
  18.         document.body.appendChild(anchor);  
  19.         var evt = document.createEvent(“MouseEvents”);  
  20.         evt.initEvent(“click”truetrue);  
  21.         anchor.dispatchEvent(evt);  
  22.         document.body.removeChild(anchor);  
  23.     } else if (navigator.msSaveBlob) {  
  24.         navigator.msSaveBlob(blob, name);  
  25.     } else {  
  26.         location.href = bloburl;  
  27.     }  
  28. }  
  29.   
  30. var a=new Array();  
  31. for(var i=0;i<10;i++)  
  32. a.push(i);  
  33.   
  34. function Save(){  
  35.     doSave(a, “text/latex”“hello.txt”);   
  36. }  

HTML文件:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <script type=‘text/javascript’ src=“SaveBlob.js”/>   
  5. </head>  
  6. <body>  
  7.     <input type=“button” id=“savetext” value=“Save” onclick=“Save()”/></div>  
  8. </body>  
  9. </html>  

代码参考: http://www.cnblogs.com/zoho/archive/2012/05/27/2520468.html

File API 这种方法,IE和Chrome皆可行。

Ref: http://www.w3.org/TR/FileAPI/

转载请注明:cooljun小站 » 使用javascript读写本地文件的方法

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址