html外部檔案讀取/寫入

標籤：其他   list   檔案資訊   cte   alt   二進位   操作   資訊   拓展   

1.檔案的讀取

外部檔案讀取控制項：

<input type="file" id="file_jquery" onchange="file_jquery(this.id)"/>

調用函數：

function file_jquery(id){        var a = $("#"+id);        var selectedFile = $("#"+id)[0].files[0];        console.log(a);        console.log(selectedFile);    }

通過負載檔案，console.log列印驗證，發現:

console.log(selectedFile);　　//列印如下

console.log(a);　　//列印如下

 

 觀察發現負載檔案後，控制項中FileList對象為負載檔案資訊。

 我們可以建立一個Filereader對象reader。

var reader = new FileReader()

然後調用FileReader的讀取方法readAsText。

reader.readAsText(selectedFile);

對應的操作函數如下：

function file_jquery(id){        var selectedFile = $("#"+id)[0].files[0];        var reader = new FileReader();        reader.readAsText(selectedFile);        console.log(reader);        reader.onload = function(){                        console.log("success");    }

負載檔案後，網頁執行情況如下：

reader.result為經過readAsText讀取後的結果。

 

關於FileReader的其他資料如下，以供拓展：

FileReader共有4種讀取方法：
1.readAsArrayBuffer(file)：將檔案讀取為ArrayBuffer。
2.readAsBinaryString(file)：將檔案讀取為二進位字串
3.readAsDataURL(file)：將檔案讀取為Data URL
4.readAsText(file, [encoding])：將檔案讀取為文本，encoding預設值為‘UTF-8‘
此外，abort()方法可以停止讀取檔案。

FileReader對象在讀取檔案後，還需要進行處理。為了不阻塞當前線程，API採用了事件模型，可以註冊這些事件：
1.onabort：中斷時觸發
2.onerror：出錯時觸發
3.onload：檔案成功讀取完畢時觸發
4.onloadend：檔案讀取完畢時觸發，無論是否失敗
5.onloadstart：檔案開始讀取時觸發
6.onprogress：當檔案讀取時，周期性地觸發

備忘：在reader的事件中，this.result 和 reader.result是等價的。

reader.onload=function(f){              var result=document.getElementById("result");              //顯示檔案              result.innerHTML=this.result;          } 

 

2.外部檔案的寫入

參考方法：

http://www.china125.com/design/js/4085.htm

http://blog.csdn.net/ghlfllz/article/details/39346345

在URL中，結合encodeURIComponent 使用特殊字元，傳遞字元資訊：

http://blog.sina.com.cn/s/blog_4586764e0100i4z3.html

 

html外部檔案讀取/寫入