如何将图像预加载到dropzone.js中 [英] How do I preload images into dropzone.js

问题描述

我在网页上有一个dropzone.js实例，具有以下选项:

I have a dropzone.js instance on a web page with the following options:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

它是通过编程方式实例化的，因为它是较大形式的一部分.我已将其组装起来，以便在提交表单时处理队列.

It is programmatically instantiated, as it is part of a larger form. I have it rigged up to process the queue when the form is submitted.

目标是让我的用户能够使用dropzone来管理商品的图像，因此，当我加载商品的"edit/update"视图时，我想将包含以下内容的图片预加载到dropzone中:之前已为该项目上传.是否有一种很好的方法来实现这一点，以使已经存在的项目在将其更改提交到图像列表时不会被重新上传?

The goal is for my users to be able to use the dropzone to manage images for an item, so when I load my 'edit/update' view for an item, I'd like to preload the dropzone with the images that had previously been uploaded for that item. Is there a good way to implement this so that the already-there items don't get re-uploaded when they submit their changes to the image list?

推荐答案

正确的方法是使用dropzone js提供的.emit方法添加文件和缩略图以从服务器预加载图像.请参见下面的示例代码.取自 https://github .com/enyo/dropzone/wiki/FAQ#how-to-show-files-已经存储在服务器上

Proper way to do it is to use .emit method provided by on dropzone js to add a file and thumbnail to preload images from the server. See sample code below. Taken from https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

dropzone的

.emit方法将触发init函数，如果您为此编写了任何addfile事件回调.例如我正在使用addfile事件添加删除按钮，还附加了删除图片功能.

.emit method from dropzone will trigger init function and if you have any addedfile event callback written for it. e.g. I am using addedfile event add remove button and also attached delete image functionality.

这篇关于如何将图像预加载到dropzone.js中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！