相關免費學習推薦:javascript(影片)
因為Google還不提供同步外掛數據的功能,所以導入和導出插件配置就必須和文件打交道了。而出於安全原因,只有IE才提供存取文件的API;但隨著HTML 5的到來,其他瀏覽器也紛紛支援了。
先說讀取檔案。 W3C提供了一些File API,其中最重要的是FileReader這個類別。
先列出需要用到的HTML標籤:
<input type="file" id="file" onchange="handleFiles(this.files)"/>
當選擇了一個檔案時,就會把包含這個檔案的清單(一個FileList物件)當作參數傳給handleFiles()函數了。
這個FileList物件類似一個數組,可以知道檔案的數目,而它的元素就是File物件了。
從這個File物件可以取得name、size、lastModifiedDate和type等屬性。
把這個File物件傳給FileReader物件的讀取方法,就能讀取檔案了。
FileReader共有4種讀取方法:
readAsArrayBuffer(file):將檔案讀取為ArrayBuffer。
readAsBinaryString(file):讀取檔案為二元字串
readAsDataURL(file):將檔案讀取為Data URL
## Text readAsAsAs(file, readAs(file,) ):將文件讀為文本,encoding缺省值為'UTF-8' 此外,abort()方法可以停止讀取文件。 FileReader物件在讀取檔案後,還需要處理。為了不阻塞目前執行緒,API採用了事件模型,可以註冊這些事件: onabort:中斷時觸發 onerror:出錯時觸發 onload:檔案成功取完畢時觸發 onloadend:文件讀取完畢時觸發,無論是否失敗 onloadstart:文件開始讀取時觸發 onprogress:當文件讀取時,週期性地觸發 有了這些方法以後,就可以處理文件了。 讀取檔案 先來試試讀取文字檔案:function handleFiles(files) { if (files.length) { var file = files[0]; var reader = new FileReader(); if (/text/w+/.test(file.type)) { reader.onload = function() { $('<pre class="brush:php;toolbar:false">' + this.result + '').appendTo('body'); } reader.readAsText(file); } } }
<span style="font-family: Arial, Helvetica, sans-serif;">这里的this.result实际上就是reader.result,也就是读取出来的文件内容。</span>
function handleFiles(files) { if (files.length) { var file = files[0]; var reader = new FileReader(); if (/text/w+/.test(file.type)) { reader.onload = function() { $('<pre class="brush:php;toolbar:false">' + this.result + '').appendTo('body'); } reader.readAsText(file); } else if(/image/w+/.test(file.type)) { reader.onload = function() { $('').appendTo('body'); } reader.readAsDataURL(file); } } }
<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>
最后,用URL.revokeObjectURL()来释放这个object URL,通知浏览器可以不必继续引用这个文件了。
下面就是一段化简的代码:
var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder; var URL = URL || webkitURL || window; function saveAs(blob, filename) { var type = blob.type; var force_saveable_type = 'application/octet-stream'; if (type && type != force_saveable_type) { // 强制下载,而非在浏览器中打开 var slice = blob.slice || blob.webkitSlice || blob.mozSlice; blob = slice.call(blob, 0, blob.size, force_saveable_type); } var url = URL.createObjectURL(blob); var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = url; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); URL.revokeObjectURL(url); } var bb = new BlobBuilder; bb.append('Hello, world!'); saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');
测试时会提示保存一个文本文件。Chrome需要把网页放在服务器上或插件里。
/** * 写文件 * @param fileName 文件名 * @param data 文件流 * @param path 写入路径 * @return boolean */ public static boolean writeFile(String fileName,String data,String path) { try { // System.out.println("fileContent:" + data); File file = new File(path + fileName); if(!file.exists()){ file.createNewFile(); } FileOutputStream outStream = new FileOutputStream(file); outStream.write(data.getBytes()); outStream.flush(); outStream.close(); outStream = null; return(true); } catch (Exception e) { e.printStackTrace(); return(false); } }
以上是學會用JavaScript讀取並儲存文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!