如何将图像预加载到dropzone.js中

Question

我在网页上有一个dropzone.js实例,其中包含以下选项:

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

它以编程方式实例化,因为它是更大形式的一部分.在提交表单时,我已经完成了处理队列的操作.

我的目标是让我的用户能够使用dropzone来管理项目的图像,所以当我加载项目的"编辑/更新"视图时,我想用以前的图像预加载dropzone.已上传该项目.有没有一种很好的方法来实现这一点,以便在他们将更改提交到图像列表时不会重新上传已存在的项目？

Answer 1

正确的方法是使用dropzone js提供的.emit方法添加文件和缩略图以从服务器预加载图像.请参阅下面的示例代码 取自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事件添加删除按钮,并附加删除图像功能.

Answer 2

Dropzone是如此强大和令人敬畏,你可以做任何事情.
要遵循的步骤 - >

1)首先,您必须创建一个服务器端脚本,它将获取所有文件名及其大小,并将其作为json响应发送.
PHP代码:

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj['name'] = $file; //get the filename in array
        $obj['size'] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header('Content-Type: application/json');
       echo json_encode($result); // now you have a json response which you can use in client side 

2)现在您可以使用响应来显示上传的文件.在dropzone init函数内写下面的代码
Javascript代码:

  init: function() {

      var thisDropzone = this;

        $.getJSON('get_item_images.php', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

注意:不要把文件名中的整个文件url路径只取文件名本身即可.
这有效