File API是html5新标准,既可以读文件,也可以写文件,注意这里的
读文件:OS中文件系统中的文件 读到 浏览器页面 中
写文件:将 浏览器页面数据 写到 浏览器文件系统 中
参见博客:http://www.html5rocks.com/en/tutorials/file/dndfiles/
其中讲解很详细,不过读文件时用的是读图片。这里贴一份读文本的代码
- <script type=“text/javascript” src=“ReadTest.js”>
- var a=new Array();
- function handleFileSelect(evt) {
- var files = evt.target.files; // FileList object
- if(files[0])
- {
- var reader = new FileReader();
- reader.readAsText(files[0]);
- reader.onload = loaded;
- }
- }
- function loaded(evt) {
- var fileString = evt.target.result;
- alert(fileString);
- }
- </script>
- </head>
- <body>
- <input type=“file” id=“file” name=“files[]” multiple />
- <script type=“text/javascript”>
- var btn=document.getElementById(‘file’);
- btn.addEventListener(‘change’, handleFileSelect, false);
- </script>
- </body>
- </html>
读文件用到FileReader接口,写文件使用FileWriter,写文件是要将 页面数据 写入到 浏览器的文件系统(root) 中,而我需要的是保存到 OS的文件系统中,所以采用另一种方法:先用BlobBuilder把要写入的数据合成Blob,创建表示Blob的URL,再根据不同浏览器选择保存策略,实际就是下载文件
JS文件:
- function doSave(value, type, name) {
- var blob;
- if (typeof window.Blob == “function”) {
- blob = new Blob([value], {type: type});
- } else {
- var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
- var bb = new BlobBuilder();
- bb.append(value);
- blob = bb.getBlob(type);
- }
- var URL = window.URL || window.webkitURL;
- var bloburl = URL.createObjectURL(blob);
- var anchor = document.createElement(“a”);
- if (‘download’ in anchor) {
- anchor.style.visibility = “hidden”;
- anchor.href = bloburl;
- anchor.download = name;
- document.body.appendChild(anchor);
- var evt = document.createEvent(“MouseEvents”);
- evt.initEvent(“click”, true, true);
- anchor.dispatchEvent(evt);
- document.body.removeChild(anchor);
- } else if (navigator.msSaveBlob) {
- navigator.msSaveBlob(blob, name);
- } else {
- location.href = bloburl;
- }
- }
- var a=new Array();
- for(var i=0;i<10;i++)
- a.push(i);
- function Save(){
- doSave(a, “text/latex”, “hello.txt”);
- }
HTML文件:
- <!DOCTYPE html>
- <html>
- <head>
- <script type=‘text/javascript’ src=“SaveBlob.js”/>
- </head>
- <body>
- <input type=“button” id=“savetext” value=“Save” onclick=“Save()”/></div>
- </body>
- </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读写本地文件的方法