對于Web程序員來說，在網頁上處理文件上傳，總是一件很麻煩的事情。在過去，我們不能夠通過拖拽上傳圖片，也沒有復雜Ajax上傳技術，很少處理多文件批量上傳。我們也無法獲取上傳過程中的信息，除非上傳完成后從服務器端獲得。有時候，等你上傳完畢后才發現上傳的文件不合適——真該死！

如今，HTML5的革命，現代瀏覽器的誕生，JavaScript的升級，這些給我們提供了使用Javascript和input[type=file]元素獲取上傳文件過程信息的能力。下面就來看看這些上傳文件API是如何使用的！

訪問要上傳的文件列表信息

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

// Assuming

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做這么多簡單的介紹。這是一個很好的API，幫助我們放置在上傳文件時浪費大量的時間。這個文件上傳API里很有很多這里沒有介紹的知識，你可以到MDN上進心詳細閱讀。

總結

以上是生活随笔為你收集整理的js调用html文件上传,JavaScript里的文件上传API的全部內容，希望文章能夠幫你解決所遇到的問題。

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