JavaScript中文件上傳API詳解

更新時(shí)間：2016年04月01日 15:35:03 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了JavaScript中文件上傳API，介紹了上傳文件API的使用方法，感興趣的小伙伴們可以參考一下

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

如今，HTML5的革命，現(xiàn)代瀏覽器的誕生，JavaScript的升級(jí)，這些給我們提供了使用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!
});

不幸的是，這個(gè)FileList并沒有一個(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類型，最后修改時(shí)間，文件名稱等：

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

iframe與主框架跨域相互訪問實(shí)現(xiàn)方法
今天正好需要用到iframe 與主框架相互訪問的實(shí)現(xiàn)方法，正好看到了這篇文章，確實(shí)不錯(cuò)，特分享一下,需要的朋友可以參考下
2017-09-09
遍歷js中對(duì)象的屬性和值的實(shí)例
下面小編就為大家?guī)硪黄闅vjs中對(duì)象的屬性和值的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
用js讀寫cookie的簡單方法(推薦)
下面小編就為大家?guī)硪黄胘s讀寫cookie的簡單方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
詳解使用fetch發(fā)送post請(qǐng)求時(shí)的參數(shù)處理
這篇文章主要介紹了詳解使用fetch發(fā)送post請(qǐng)求時(shí)的參數(shù)處理的相關(guān)資料,需要的朋友可以參考下
2017-04-04
JavaScript雙問號(hào)(??)操作符用法詳解
在現(xiàn)代JavaScript開發(fā)中,處理變量默認(rèn)值是一個(gè)常見但容易引發(fā)bug的操作,很多開發(fā)者可能都遇到過這樣的問題：使用||設(shè)置默認(rèn)值時(shí),意外覆蓋了0、''等合法值,這時(shí)候,ES2020引入的雙問號(hào)操作符（??）就能完美解決這類問題,本文將帶您全面掌握這個(gè)操作符的使用場景和高級(jí)技巧
2025-04-04
document.getElementById方法在Firefox與IE中的區(qū)別
相信很多朋友在寫JavaScript的時(shí)候，對(duì)瀏覽器的兼容問題會(huì)感到很頭疼。這不，煩什么，什么就來了，特記錄下來，與大家分享。
2010-05-05
理解 JavaScript Scoping & Hoisting（二）
這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對(duì)于有經(jīng)驗(yàn)的程序員來說這只是小菜一碟，不過我還是順著初學(xué)者常見的思路做一番描述
2015-11-11
javascript實(shí)現(xiàn)微信分享
這篇文章主要介紹了javascript實(shí)現(xiàn)微信分享，非常的實(shí)用，小伙伴們參考下吧
2014-12-12
JS轉(zhuǎn)換金額大寫方法詳細(xì)例子
在處理財(cái)務(wù)賬款類需求時(shí)需要將轉(zhuǎn)賬金額寫成大寫的,下面這篇文章主要給大家介紹了關(guān)于JS轉(zhuǎn)換金額大寫方法的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2023-10-10
Javascript正則表達(dá)式實(shí)現(xiàn)輸入框驗(yàn)證信息功能實(shí)例
正則表達(dá)式是用于匹配字符串中字符組合的模式,在JavaScript中正則表達(dá)式也是對(duì)象,這篇文章主要給大家介紹了關(guān)于Javascript正則表達(dá)式實(shí)現(xiàn)輸入框驗(yàn)證信息功能的相關(guān)資料,需要的朋友可以參考下
2024-05-05