Jquery 文件上传 可以上传多个文件统一传给后台 支持回显
时间: 2023-06-30 22:10:58 浏览: 179
mvc-demo.zip
当然可以。以下是一个支持文件上传和回显的示例:
HTML代码:
```html
<form id="myForm" enctype="multipart/form-data">
<input type="file" name="myFiles[]" multiple>
<input type="button" value="Upload" onclick="uploadFiles()">
</form>
<div id="fileList"></div>
```
JavaScript代码:
```javascript
function uploadFiles() {
var formData = new FormData($("#myForm")[0]);
$.ajax({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
showFiles(response.files);
alert("Files uploaded successfully!");
},
error: function(xhr, status, error) {
alert("Error uploading files: " + xhr.responseText);
}
});
}
function showFiles(files) {
var fileList = $("#fileList");
fileList.empty();
$.each(files, function(index, file) {
var li = $("<li></li>");
li.text(file.name);
fileList.append(li);
});
}
```
在这个例子中,我们使用了HTML的表单来选择多个文件,并使用Jquery的FormData对象来创建一个包含多个文件数据的表单对象。我们在表单下面添加了一个div元素来显示上传的文件列表。然后我们使用ajax方法将表单数据发送到服务器。成功时,服务器返回包含上传文件信息的JSON数据,并将其传递给showFiles函数进行文件回显。在showFiles函数中,我们遍历文件列表并将每个文件的名称添加到文件列表div中。
阅读全文