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

想起以前看到j(luò)s讀取本地文件的文章，然后自己寫了個(gè)demo。

ps:這有點(diǎn)像Java的IO流，但是又有差別。

首先我們定義一個(gè)input標(biāo)簽type="file"

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

然后我們定義一個(gè)jsReadFiles的方法將文件作為參數(shù)；當(dāng)上傳文件的時(shí)候讀取這個(gè)文件

 1 //js 讀取文件
 2     function jsReadFiles(files) {
 3         if (files.length) {
 4             var file = files[0];
 5             var reader = new FileReader();//new一個(gè)FileReader實(shí)例
 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這個(gè)對(duì)象來(lái)完成；

FileReader接口的方法：

readAsBinaryString 　　 file 將文件讀取為二進(jìn)制編碼
readAsText 　　 file,[encoding] 將文件讀取為文本，其中第二個(gè)參數(shù)是文本的編碼方式，默認(rèn)值為 UTF-8
readAsDataURL file 將文件讀取為DataURL
abort 　(none) 中斷讀取操作(無(wú)論讀取成功或失敗，方法并不會(huì)返回讀取結(jié)果，這一結(jié)果存儲(chǔ)在result屬性中)

相關(guān)事件：

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

文件一旦開始讀取，無(wú)論成功或失敗，實(shí)例的 result 屬性都會(huì)被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結(jié)果。

如果讀取文件過大的話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編碼的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

1.減少了http請(qǐng)求。

2.沒有跨域的問題。

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

缺點(diǎn)：

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。