html外部文件讀取/寫入

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