设计一个form表单,包含id,name和文件上传功能,对上传文件数量不做限制,以列表的形式显示已添加文件名称,在每条文件后显示删除标识,点击删除单条文件信息
时间: 2023-12-14 19:04:36 浏览: 109
表单-文件-上传-显示
以下是一个简单的HTML表单,包含id和name输入框,以及文件上传功能。使用JavaScript实现文件上传时的动态添加和删除功能:
```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="file">Upload file:</label>
<input type="file" id="file" name="file"><br><br>
<button type="button" onclick="addFile()">Add file</button><br><br>
<ul id="fileList"></ul>
<button type="submit">Submit</button>
</form>
<script>
function addFile() {
var fileInput = document.getElementById("file");
var fileList = document.getElementById("fileList");
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var li = document.createElement("li");
var fileName = document.createTextNode(files[i].name);
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "Delete";
deleteButton.onclick = function() {
this.parentNode.parentNode.removeChild(this.parentNode);
};
li.appendChild(fileName);
li.appendChild(deleteButton);
fileList.appendChild(li);
}
}
</script>
```
用户点击"Add file"按钮时,JavaScript会获取文件上传控件中选择的所有文件,并将每个文件的名称添加到一个无序列表中。每个文件条目后面都有一个"Delete"按钮,用户可以点击该按钮删除单个文件信息。
请注意,此表单仅包含基本的前端代码和逻辑。在实际应用程序中,您需要考虑文件上传的安全性,以及在服务器端处理上传的文件等问题。
阅读全文