用jQuery和formdata上传多个图片文件发送给后端的同时在前端页面显示出来
时间: 2024-05-01 19:19:38 浏览: 12
可以使用以下步骤:
1. 创建一个HTML表单,其中包含一个文件选择器和一个“上传”按钮。
2. 使用jQuery在点击“上传”按钮时触发一个函数。
3. 在该函数中,获取选择的文件列表并将其存储在变量中。
4. 使用FormData对象来创建一个新的表单数据对象,并向其中添加每个文件。
5. 发送一个AJAX请求,将FormData对象发送到服务器端。
6. 一旦接收到服务器的响应,可以使用jQuery添加一个新的图片元素到页面上,以显示上传的图片。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Upload Images with jQuery and FormData</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<form id="imageUploadForm">
<input type="file" id="imageInput" name="imageInput" multiple>
<input type="button" value="Upload" onclick="uploadImages()">
</form>
<div id="imagePreview"></div>
<script>
function uploadImages() {
var files = $('#imageInput')[0].files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('images[]', files[i]);
}
$.ajax({
url: 'uploadImages.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
for (var i = 0; i < files.length; i++) {
var previewImg = $('<img>').attr('src', URL.createObjectURL(files[i]));
$('#imagePreview').append(previewImg);
}
},
error: function() {
alert('An error occurred while uploading the images.');
}
});
}
</script>
</body>
</html>
```
在上面的示例代码中,我们创建了一个表单,其中包含一个文件选择器和一个“上传”按钮。当用户点击“上传”按钮时,将调用uploadImages()函数。该函数首先获取选择的文件列表,并使用FormData对象创建一个新的表单数据对象。然后,它使用AJAX发送FormData对象到服务器端。一旦接收到服务器的响应,就会使用jQuery添加一个新的图片元素到页面上,以显示上传的图片。