!doctype html html lang= en head  meta charset= UTF-8  title Document /title /head body  input type= file id= files >寫入文件
HTML5中與FileReader相對應的也有一個FileWriter,FileReader可以被Chrome、FF和Safari都支持。要求一定版本以上的。 但是FileWriter似乎只有被Chrome支持.
代碼如下:
//首先導入一個Js文件 script type= text/javascript src= ./JS/FileSaver.js charset= utf-8 /script //HTML中添加一個導出元素 input type= button id= export value= 導出 / //JS文件$( #export).click(function(){ var content = 這是直接使用HTML5進行導出的  var blob = new Blob([content], {type: text/plain;charset=utf-8 }); saveAs(blob, file.txt //saveAs(blob,filename)});
讀取本地文件路徑代碼
在獲取文件路徑的遇到些問題，由于安全原因，新版的瀏覽器都不支持直接獲取本地URL，在網上找了些方法，如下：
 !doctype html html lang= en head  meta charset= UTF-8  title Document /title /head body script type= text/javascript  //FX獲取文件路徑方法 function readFileFirefox(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; } var fileName=fileBrowser.value; //這一步就能得到客戶端完整路徑。下面的是否判斷的太復雜，還有下面得到ie的也很復雜。 var file = Components.classes[ @mozilla.org/file/local;1 ] .createInstance(Components.interfaces.nsILocalFile); try { // Back slashes for windows file.initWithPath( fileName.replace(////g, //// ) ); } catch(e) { if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e; alert( File + fileName + cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file. return; } if ( file.exists() == false ) { alert( File + fileName + not found. return; } return file.path; } //根據不同瀏覽器獲取路徑 function getvl(obj){//判斷瀏覽器 var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (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; var file_url= if(Sys.ie = 6.0 ){ //ie5.5,ie6.0 file_url = obj.value; }else if(Sys.ie = 7.0 ){ //ie7,ie8 obj.select(); file_url = document.selection.createRange().text; }else if(Sys.firefox){ //fx //file_url = document.getElementById( file ).files[0].getAsDataURL();//獲取的路徑為FF識別的加密字符串 file_url = readFileFirefox(obj); }else if(Sys.chrome){ file_url = obj.value; } //alert(file_url); document.getElementById( text ).innerHTML= 獲取文件域完整路徑為： +file_url; } /script h1 JS獲取文件域完整路徑的方法，兼容不同瀏覽器 /h1 p id= text >
以上代碼在IE 6 7 8均正常使用，在IE9下，document.selection.createRange()拒絕訪問，看來安全性有所提高。
最后測試發現，在IE9下，如果file控件獲得焦點，則document.selection.createRange()拒絕訪問，
因此，只需要在obj.select()后面加一句obj.blur()即可。
else if(Sys.ie = 7.0 ){ //ie7,ie8 obj.select(); obj.blur(); file_url = document.selection.createRange().text;// obj = document.getElementById( file 
以上就是h5+js實現本地文件讀取和寫入的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。