dropzone 显示服务器已上传成功的多个图片并显示成功标志
时间: 2024-04-26 20:26:58 浏览: 10
要在 Dropzone 中显示服务器已上传成功的多个图片并显示成功标志,需要在服务器端返回一个 JSON 数组,其中包含每个上传成功的文件的信息,如文件名、URL、大小等。例如:
```
[
{
"name": "file1.jpg",
"size": 1024,
"url": "http://example.com/file1.jpg",
"success": true
},
{
"name": "file2.jpg",
"size": 2048,
"url": "http://example.com/file2.jpg",
"success": true
},
{
"name": "file3.jpg",
"size": 3072,
"url": "http://example.com/file3.jpg",
"success": true
}
]
```
在 Dropzone 的 success 回调函数中,可以遍历服务器返回的 JSON 数组,获取每个上传成功的文件的信息,并在 Dropzone 中显示相应的图片并显示成功标志。例如:
```
Dropzone.options.myDropzone = {
// 配置项
success: function(file, response) {
// 遍历服务器返回的 JSON 数组
for (var i = 0; i < response.length; i++) {
// 获取每个上传成功的文件的信息
var file = response[i];
// 在 Dropzone 中显示相应的图片并显示成功标志
this.displayExistingFile({
name: file.name,
size: file.size,
accepted: true
}, file.url);
this.emit("success", file);
}
}
};
```
在上面的示例中,我们在 success 回调函数中遍历服务器返回的 JSON 数组,并使用 displayExistingFile 方法在 Dropzone 中显示相应的图片,并使用 emit 方法触发 success 事件以显示成功标志。可以根据实际情况进行修改。