在form表单中定义一个button,点击可以上传多个文件 ,并在其下方列出所有文件的名称,在名称后加入删除标记,点击可以删除一条文件
时间: 2023-12-20 16:03:16 浏览: 79
你可以使用HTML和JavaScript来实现这个功能。首先,在form表单中添加一个input标签,并设置type属性为file,这样用户就可以选择多个文件进行上传:
```html
<form>
<input type="file" name="files" id="file-input" multiple>
<button type="button" onclick="uploadFiles()">上传文件</button>
</form>
```
接下来,你需要编写上传文件的JavaScript函数uploadFiles()。在这个函数中,你可以使用FormData对象来上传文件,并使用XMLHttpRequest对象来发送HTTP请求。上传成功后,你可以将文件名添加到一个列表中,并在每个文件名后面添加一个删除按钮:
```javascript
function uploadFiles() {
var input = document.getElementById('file-input');
var files = input.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
var file = files[i];
formData.append('files[]', file, file.name);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() {
if (xhr.status === 200) {
var fileList = document.getElementById('file-list');
for (var i = 0; i < files.length; i++) {
var li = document.createElement('li');
li.textContent = files[i].name;
var deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.onclick = function() {
li.parentNode.removeChild(li);
};
li.appendChild(deleteButton);
fileList.appendChild(li);
}
} else {
alert('上传文件失败');
}
};
xhr.send(formData);
}
```
最后,在HTML文件中添加一个无序列表(ul)用来显示上传的文件列表:
```html
<ul id="file-list"></ul>
```
这样,当用户选择并上传多个文件后,就可以在页面上看到一个文件列表,并且可以点击删除按钮删除某个文件。
阅读全文