以下是实现 jQuery 动态添加
input type=
file 文件上传域并最后 ajax 上传所有文件的代码。
HTML 代码：
```html
<form id="upload-form">
<div id="
file-list"></div>
<button id="add-
file">添加文件</button>
<button id="upload-all">上传所有文件</button>
</form>
```
JavaScript 代码：
```javascript
$(function() {
var
fileList = $('#
file-list');
var addButton = $('#add-
file');
var uploadAllButton = $('#upload-all');
var uploadForm = $('#upload-form');
var
fileListData = [];
addButton.on('click', function() {
var
fileInput = $('<
input type="
file" name="
file">');
var removeButton = $('<button>删除</button>');
var listItem = $('<div></div>').append(
fileInput).append(removeButton);
fileList.append(listItem);
removeButton.on('click', function() {
listItem.remove();
fileListData =
fileListData.filter(function(data) {
return data.
input[0] !==
fileInput[0];
});
});
fileInput.on('change', function() {
var
file =
fileInput[0].
files[0];
var data = {
input:
fileInput,
file:
file };
fileListData.push(data);
});
});
uploadAllButton.on('click', function() {
var formData = new FormData();
fileListData.forEach(function(data) {
formData.append('
file', data.
file);
});
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
content
Type: false,
success: function(data) {
console.log('上传成功');
}
});
});
});
```
具体实现步骤如下：
1. 创建一个表单，包含文件列表容器、添加文件按钮、上传所有文件按钮。
2. 给添加文件按钮
绑定一个点击事件，动态创建一个
input type=
file 文件上传域和删除按钮，将它们添加到文件列表容器中。
3. 给删除按钮
绑定一个点击事件，当点击时将该文件上传域从文件列表容器中删除，并从
fileListData 数组中删除对应的数据。
4. 给文件上传域
绑定一个 change 事件，当选择了文件时，创建一个对象，保存文件
输入框和文件数据，将它添加到
fileListData 数组中。
5. 给上传所有文件按钮
绑定一个点击事件，遍历
fileListData 数组，将每个文件数据添加到 FormData 对象中，然后通过 ajax 发送到服务器。
6. 在 ajax 的 success 回调函数中处理上传成功后的逻辑。
注意，要设置 processData 和 content
Type 为 false，这样 jQuery 就会将 FormData 对象中的数据直接发送到服务器，而不是将其转换为字符串发送。
2156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
