前端使用js讀取文件

最近同事問我js能不能讀取本地文件；

想起以前看到js讀取本地文件的文章，然后自己寫了個demo。

ps:這有點像Java的IO流，但是又有差別。

 

首先我們定義一個input標簽type="file"

jsReadFile:<input type="file" onchange="jsReadFiles(this.files)"/>

然后我們定義一個jsReadFiles的方法將文件作為參數；當上傳文件的時候讀取這個文件

//js 讀取文件
    function jsReadFiles(files) {
        if (files.length) {
            var file = files[0];
            var reader = new FileReader();//new一個FileReader實例
            if (/text+/.test(file.type)) {//判斷文件類型，是不是text類型
                reader.onload = function() {
                    $('body').append('<pre>' + this.result + '</pre>');
                }
                reader.readAsText(file);
            } else if(/image+/.test(file.type)) {//判斷文件是不是imgage類型
                reader.onload = function() {
                    $('body').append('<img src="' + this.result + '"/>');
                }
                reader.readAsDataURL(file);
            }
        }
    }

這里用到了html5的FileReader這個對象來完成；

FileReader接口的方法：

readAsBinaryString                   　　  file                                                      將文件讀取為二進制編碼
readAsText                                 　　 file,[encoding]                                   將文件讀取為文本，其中第二個參數是文本的編碼方式，默認值為 UTF-8
readAsDataURL                                 file                                                      將文件讀取為DataURL
abort                                              　(none)                                                 中斷讀取操作(無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在result屬性中)

相關事件：

onabort                               中斷
onerror                               出錯
onloadstart                     　  開始
onprogress                          正在讀取
onload                                成功讀取
onloadend                           讀取完成，無論成功失敗

文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果。

如果讀取文件過大的話fileReader允許分段讀取文件；

var blob_file;
if(file.webkitSlice) {  //chrome
        blob_file= file.webkitSlice(start, end + 1, 'text/plain;charset=UTF-8');
} else if(file.mozSlice) { //Firefox
        blob_file= file.mozSlice(start, end + 1, 'text/plain;charset=UTF-8');
}

 

成功讀取文件：

 

 

 

 圖片上傳成功，只是圖片路徑變成了base64編碼的形式。

順便嘮叨一下base64編碼的優缺點：

優點：

1.減少了http請求。

2.沒有跨域的問題。

3.直接放在路徑里不需要清理緩存。

缺點：

1.IE6/7不支持(不過這個問題不大)；

2.base64本質上是將圖片以二進制的字母展示，字符量過大無形中增加了css/html文件的大小；

 

以上就是js讀取文件的樣例，有不對的地方歡迎大家吐槽！