對(duì)于Web程序員來(lái)說(shuō)，在網(wǎng)頁(yè)上處理文件上傳，總是一件很麻煩的事情。在過(guò)去，我們不能夠通過(guò)拖拽上傳圖片，也沒(méi)有復(fù)雜Ajax上傳技術(shù)，很少處理多文件批量上傳。我們也無(wú)法獲取上傳過(guò)程中的信息，除非上傳完成后從服務(wù)器端獲得。有時(shí)候，等你上傳完畢后才發(fā)現(xiàn)上傳的文件不合適！

如今，HTML5的革命，現(xiàn)代瀏覽器的誕生，JavaScript的升級(jí)，這些給我們提供了使用Javascript和input[type=file]元素獲取上傳文件過(guò)程信息的能力。

下面就來(lái)看看這些上傳文件API是如何使用的！

訪問(wèn)要上傳的文件列表信息

如果要獲得所有input[type=file]里要上傳的文件列表，你需要使用files屬性：

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {

 console.log(uploadInput.files) // File listing!

});

不幸的是，這個(gè)FileList并沒(méi)有一個(gè)叫做forEach的方法，所以我們只能使用老式的循環(huán)技巧對(duì)FileList進(jìn)行循環(huán)操作：

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {

 console.log(files[i]);

}

很重要的一點(diǎn)，F(xiàn)ileList里是有一個(gè)length屬性的。

獲取單個(gè)上傳文件的信息

FileList里的每個(gè)文件對(duì)象里都保存著大量的關(guān)于這個(gè)文件的信息，包括文件的體積大小，文件MIME類(lèi)型，最后修改時(shí)間，文件名稱(chēng)等：

{

 lastModified: 1428005315000,

 lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),

 name: "profile.pdf",

 size: 135568,

 type: "application/pdf",

 webkitRelativePath: ""

}

這些基礎(chǔ)信息對(duì)我們來(lái)說(shuō)最大的用處就是，我們可以在上傳文件之前校驗(yàn)它們。例如，你可以校驗(yàn)文件的類(lèi)型和體積大小：

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {

 totalSize += files[i].size;

 if(totalSize > maxAllowedSize) {

 // Notify the user that their file(s) are too large

 }

 if(files[i].type != 'application/pdf') {

 // Notify of invalid file type for file in question

 }

}

如果用戶(hù)上傳的文件的體積太大，超過(guò)了允許范圍，或上傳的類(lèi)型不對(duì)，你可以阻止用戶(hù)上傳，然后給予他們必要的提示，是什么原因不能上傳成功。

以上就是對(duì)文件上傳API做的簡(jiǎn)單介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。