HTML5作為一種超文本標(biāo)記語(yǔ)言，已經(jīng)成為了Web開(kāi)發(fā)的標(biāo)準(zhǔn)。它提供了很多新特性，其中之一是多文件上傳。本文將介紹如何使用HTML5的文件API和ajax技術(shù)來(lái)實(shí)現(xiàn)多文件上傳功能。
在HTML5中，一個(gè)元素可以讓用戶選擇多個(gè)文件上傳。而通過(guò)JavaScript，我們可以使用File API來(lái)訪問(wèn)這些文件并上傳文件到服務(wù)器。
下面是一個(gè)基本的HTML代碼，包含一個(gè)文件選擇框和一個(gè)上傳按鈕：
```html
``` 當(dāng)用戶選擇了需要上傳的文件后，我們可以使用JavaScript獲取這些文件并將它們存儲(chǔ)在一個(gè)數(shù)組里： ```javascript var files = document.getElementById('files').files; ``` 接下來(lái)，我們需要為每個(gè)文件創(chuàng)建一個(gè)FormData對(duì)象，并使用XMLHttpRequest對(duì)象將數(shù)據(jù)上傳到服務(wù)器： ```javascript function uploadFiles() { var files = document.getElementById('files').files; var formData = new FormData(); for (var i = 0; i< files.length; i++) { formData.append('files[]', files[i]); } var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { alert('文件上傳成功！'); } else { alert('文件上傳失敗！'); } }; xhr.send(formData); } ``` 在上面的代碼中，我們首先獲取用戶選擇的所有文件，并使用for循環(huán)為每個(gè)文件創(chuàng)建一個(gè)FormData對(duì)象。然后使用XMLHttpRequest對(duì)象將form數(shù)據(jù)上傳到服務(wù)器。 最后一點(diǎn)，我們需要在服務(wù)器端接收這些文件并將它們保存到磁盤(pán)。下面是一個(gè)Node.js代碼示例，代碼會(huì)將上傳的文件保存在“uploads”目錄下： ```javascript var express = require('express'); var app = express(); var multer = require('multer'); app.use(multer({ dest: './uploads/'}).array('files[]')); app.post('/upload', function(req, res){ console.log(req.body); console.log(req.files); res.send('文件上傳成功！'); }); app.listen(3000); ``` multer是一個(gè)處理多部分?jǐn)?shù)據(jù)的Node.js中間件。使用它，我們可以很方便地將用戶上傳的文件存儲(chǔ)到磁盤(pán)。 綜上所述，使用HTML5的文件API和ajax技術(shù)來(lái)實(shí)現(xiàn)多文件上傳功能是非常簡(jiǎn)單的。只需要幾行JavaScript代碼和一個(gè)Node.js服務(wù)器就可以實(shí)現(xiàn)。
請(qǐng)選擇文件：
``` 當(dāng)用戶選擇了需要上傳的文件后，我們可以使用JavaScript獲取這些文件并將它們存儲(chǔ)在一個(gè)數(shù)組里： ```javascript var files = document.getElementById('files').files; ``` 接下來(lái)，我們需要為每個(gè)文件創(chuàng)建一個(gè)FormData對(duì)象，并使用XMLHttpRequest對(duì)象將數(shù)據(jù)上傳到服務(wù)器： ```javascript function uploadFiles() { var files = document.getElementById('files').files; var formData = new FormData(); for (var i = 0; i< files.length; i++) { formData.append('files[]', files[i]); } var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { alert('文件上傳成功！'); } else { alert('文件上傳失敗！'); } }; xhr.send(formData); } ``` 在上面的代碼中，我們首先獲取用戶選擇的所有文件，并使用for循環(huán)為每個(gè)文件創(chuàng)建一個(gè)FormData對(duì)象。然后使用XMLHttpRequest對(duì)象將form數(shù)據(jù)上傳到服務(wù)器。 最后一點(diǎn)，我們需要在服務(wù)器端接收這些文件并將它們保存到磁盤(pán)。下面是一個(gè)Node.js代碼示例，代碼會(huì)將上傳的文件保存在“uploads”目錄下： ```javascript var express = require('express'); var app = express(); var multer = require('multer'); app.use(multer({ dest: './uploads/'}).array('files[]')); app.post('/upload', function(req, res){ console.log(req.body); console.log(req.files); res.send('文件上傳成功！'); }); app.listen(3000); ``` multer是一個(gè)處理多部分?jǐn)?shù)據(jù)的Node.js中間件。使用它，我們可以很方便地將用戶上傳的文件存儲(chǔ)到磁盤(pán)。 綜上所述，使用HTML5的文件API和ajax技術(shù)來(lái)實(shí)現(xiàn)多文件上傳功能是非常簡(jiǎn)單的。只需要幾行JavaScript代碼和一個(gè)Node.js服務(wù)器就可以實(shí)現(xiàn)。