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

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

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

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

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

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

 1 //js 讀取文件
 2     function jsReadFiles(files) {
 3         if (files.length) {
 4             var file = files[0];
 5             var reader = new FileReader();//new一個FileReader實例
 6             if (/text+/.test(file.type)) {//判斷文件類型，是不是text類型
 7                 reader.onload = function() {
 8                     $('body').append('<pre>'%20+%20this.result%20+%20'</pre>');
 9                 }
10                 reader.readAsText(file);
11             } else if(/image+/.test(file.type)) {//判斷文件是不是imgage類型
12                 reader.onload = function() {
13                     $('body').append('<img src="'%20+%20this.result%20+%20'"/>');
14                 }
15                 reader.readAsDataURL(file);
16             }
17         }
18     }

這里用到了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讀取文件的樣例，有不對的地方歡迎大家吐槽！

總結

以上是生活随笔為你收集整理的前端使用js读取文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。