在HTML5以前，HTML的文件上傳域的功能具有很大的局限性，這種局限性主要體現在如下兩點：

每次只能選擇一個文件進行上傳

客戶端代碼只能獲取被上傳文件的文件路徑，無法訪問實際的文件內容

一、FileList對象和File對象

HTML5為type='file' 的元素增加了兩個屬性。

accept:該屬性控制允許上傳的文件類型。該屬性為一個或多個MIME類型字符串。多個MIME類型字符串之間應以都好分割。

multiple：該屬性設置是否允許選擇多個文件

JavaScript可以通過files屬性訪問type='file'的元素生成的文件上傳域的所有文件，該屬性返回一個FileList對象，FileList對象相當于一個數組，開發者可以使用類似于數組的方法來訪問該數組內的每個File對象。

File對象是一個JavaScript對象，可以通過該對象獲取瀏覽器的所有文件信息。File對象包含如下屬性。

name:返回該File對象對應的文件的文件名， 不包括文件路徑部分

type：返回該File對象的文件的MIME類型字符串。

size：返回該File對象的對應的文件的大小，字節單位

實例：

預覽圖片：

varimgInput=document.getElementById('images');

imgInput.οnchange= function() {//1.獲取所有選中文件列表

varfileList=imgInput.files;//2.遍歷顯示信息

for(vari= 0; i

vardiv=document.createElement('div');

div.innerHTML= "第" +(i+ 1)+ "個文件的文件名：" +file.name+ ",文件類型：" +file.type+ "，文件大小：" +file.size;//添加到 body中

document.body.appendChild(div);

}

}

顯示結果：

提示：該文件選擇框設置了accept='image/*'只顯示圖片。

不要靠accept屬性來過濾文件類型，因為這只是客戶端的文件類型過濾，這種文件類型過濾是很脆弱的，如果開發者需要進行文件上傳，則必須在服務器端對文件類型進行過濾。

二、使用FileReader讀取文件內容

FileReader同樣是一個JavaScript對象，開發者可以通過該對象在客戶端讀取 文件上傳域所選擇的文件內容.關于FileReader

實例1：

讀取文本文件：讀取為二進制：讀取為DataURL：

//判斷瀏覽器是否支持FileReader對象

varreaderif(FileReader) {

reader= newFileReader();

}else{

alert('您的瀏覽器不支持FileReader對象');

}//1.讀取為文本

varfile1=document.getElementById('file1');

file1.οnchange= function() {varfile=file1.files[0];//判斷讀取的第一個文件是否是文本文件

if(/text/w+/.test(file.type)) {//以文本的方式讀取內容

reader.readAsText(file,'gbk');

reader.οnlοad= function() {

document.getElementById('result').innerHTML=reader.result;

}

}else{

alert('讀取的不是文本文件');

}

}//2.讀取為二級制

varfile2=document.getElementById('file2');

file2.οnchange= function() {varfile=file2.files[0];//以二進制流的方式讀取第一個文件

//reader.readAsArrayBuffer(file); //返回二進制數組

reader.readAsBinaryString(file);//返回二進制字符串

reader.οnlοad= function() {

document.getElementById('result').innerHTML=reader.result;

}

}//3.讀取為DataURL

varfile3=document.getElementById('file3');

file3.οnchange= function() {varfile=file3.files[0];

reader.readAsDataURL(file);

reader.οnlοad= function() {

document.getElementById('result').innerHTML=reader.result;

}

}

FileReader在讀取文件的過程中可能多次觸發onprogress事件，通過該事件綁定監聽器即可實時監控文件的讀取進度。

提示：FileReader只是客戶端的JavaScript對象，使用FileReader所進行的上傳也只是把磁盤上的文件讀取到瀏覽器內存中，并未真正上傳到服務器。如果需要真正把客戶端文件上傳到服務器，則可把文件數據以POST請求方式提交到遠程服務器，遠程服務器負責接收文件數據，并把數據內容保存到服務器。

實例2：

讀取二進制文件：顯示進度：

總結

以上是生活随笔為你收集整理的html5文件域的自动获取,HTML5 文件域+FileReader 读取文件(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

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