定义一个form表单其中包含id,name和一个button,点击可以上传多个文件 ,并在其下方列出所有文件的名称,在名称后加入删除标记,点击可以删除一条文件
时间: 2023-12-29 12:05:53 浏览: 68
下面是一个基本的HTML代码,实现了你的需求:
```html
<form>
<label for="id">ID:</label>
<input type="text" id="id" name="id"><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="files">Upload files:</label>
<input type="file" id="files" name="files" multiple><br><br>
<button type="button" onclick="uploadFiles()">Upload</button>
</form>
<div id="fileList"></div>
<script>
function uploadFiles() {
var files = document.getElementById("files").files;
var fileList = document.getElementById("fileList");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var fileName = file.name;
// Create a new list item for each file
var listItem = document.createElement("li");
var textNode = document.createTextNode(fileName);
listItem.appendChild(textNode);
// Add a delete button to the list item
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "Delete";
deleteButton.onclick = function() {
this.parentNode.parentNode.removeChild(this.parentNode);
};
listItem.appendChild(deleteButton);
fileList.appendChild(listItem);
}
}
</script>
```
这个代码会创建一个表单,其中包含ID、Name和一个上传文件的输入框。当用户点击“Upload”按钮时,JavaScript代码会获取用户选择的所有文件,然后在下方的`<div>`中列出所有文件的名称,并为每个文件名称添加一个删除按钮。当用户点击删除按钮时,该文件名称所在的整个列表项将从页面中删除。
阅读全文