JavaScript中檔案上傳API詳解_javascript技巧

對Web程式設計師來說，在網頁上處理文件上傳，總是一件很麻煩的事。在過去，我們無法透過拖曳上傳圖片，也沒有複雜Ajax上傳技術，很少處理多檔案批次上傳。我們也無法取得上傳過程中的信息，除非上傳完成後從伺服器端取得。有時候，等你上傳完畢後才發現上傳的檔案不適合！

如今，HTML5的革命，現代瀏覽器的誕生，JavaScript的升級，這些給我們提供了使用Javascript和input[type=file]元素獲取上傳文件過程資訊的能力。

下面就來看看這些上傳檔案API是如何使用的！

存取要上傳的檔案清單資訊

如果要取得所有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!
});

不幸的是，這個FileList並沒有一個叫做forEach的方法，所以我們只能使用老式的循環技巧對FileList進行循環操作：

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
 console.log(files[i]);
}

很重要的一點，FileList裡是有一個length屬性的。

取得單一上傳檔案的資訊

FileList裡的每個文件物件裡都保存著大量的關於這個文件的信息，包括文件的體積大小，文件MIME類型，最後修改時間，文件名稱等：

{
 lastModified: 1428005315000,
 lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
 name: "profile.pdf",
 size: 135568,
 type: "application/pdf",
 webkitRelativePath: ""
}

這些基本資訊對我們來說最大的用處就是，我們可以在上傳檔案之前校驗它們。例如，你可以校驗檔案的類型和體積大小：

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
 }
}

如果使用者上傳的檔案的體積太大，超過了允許範圍，或上傳的類型不對，你可以阻止使用者上傳，然後給予他們必要的提示，是什麼原因不能上傳成功。

以上就是檔案上傳API做的簡單介紹，希望對大家的學習有所幫助。