将下面的代码改为多个文件上传的形式:var xhr = new XMLHttpRequest(); var formData = new FormData(); // 添加文件参数 var fileInput = document.getElementById('fileInput'); formData.append('file', fileInput.files[0]); // 添加普通文本参数 formData.append('name', 'John'); xhr.open('POST', '/upload'); xhr.setRequestHeader('Content-Type', 'multipart/form-data'); xhr.onload = function() { if (xhr.status === 200) { console.log('上传成功'); } else { console.log('上传失败'); } }; xhr.send(formData);
时间: 2023-12-06 11:03:36 浏览: 40
好的,我可以帮您进行这个操作。首先,我们需要将 HTML 和 JavaScript 分别保存在两个文件中。
在 HTML 文件中,我们需要添加一个表单元素,用于让用户选择需要上传的文件。我们可以使用 `<input>` 元素,并设置 `type` 属性为 `"file"`,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file">
<input type="text" id="nameInput" name="name" value="John">
<button type="button" onclick="submitForm()">提交</button>
</form>
<script src="upload.js"></script>
</body>
</html>
```
在 JavaScript 文件中,我们需要编写上传文件的逻辑。我们可以创建一个函数 `submitForm`,该函数会获取表单元素并将其数据打包成一个 `FormData` 对象,然后使用 `XMLHttpRequest` 对象发送 POST 请求,如下所示:
```javascript
function submitForm() {
var xhr = new XMLHttpRequest();
var formData = new FormData();
// 添加文件参数
var fileInput = document.getElementById('fileInput');
formData.append('file', fileInput.files[0]);
// 添加普通文本参数
var nameInput = document.getElementById('nameInput');
formData.append('name', nameInput.value);
xhr.open('POST', '/upload');
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.log('上传失败');
}
};
xhr.send(formData);
}
```
最后,我们需要在 HTML 文件中引入 JavaScript 文件,如下所示:
```html
<script src="upload.js"></script>
```
完成以上操作后,我们就可以将 HTML 和 JavaScript 分别保存在两个文件中,并实现多个文件上传的功能。