如何在Dropzone.js中预加载图片

Question

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

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

它是以编程方式实例化的，因为它是较大表单的一部分。我已经将其连接到了表单提交时处理队列的机制。

我的目标是让用户能够使用此放置区来管理项目的图像，因此当我加载某个项目的“编辑/更新”视图时，我希望预加载先前上传过的该项目的图像。有没有好的方法来实现这一点，以便在提交更改到图像列表时不会重新上传已有项？

- ralbatross

Answer 1

正确的方法是使用DropzoneJS提供的.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函数，如果你为它编写了任何addedfile事件回调函数，它也会被触发。例如，我正在使用addedfile事件添加删除按钮，并附加了删除图像功能。

.emit方法来自dropzone，将触发init函数，如果您已经为其编写了任何addedfile事件回调，则也将触发它。例如，我正在使用addedfile事件添加删除按钮，并且还附加了删除图像功能。

- microchip78

---

如果您限制了上传文件的数量，您必须添加myDropzone.files.push(mockFile);以继续强制执行此上传限制。 - Kent Munthe Caspersen

实际上，您应该始终包括来自Kent的行（myDropzone.files.push(mockFile)），否则调用myDropzone.removeAllFiles()将无法删除预填充的文件。 - Justin

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

            });

        });
}

注意：在文件名中只包含文件名本身，而不是整个文件路径。
就是这样。

- Vishal Nair

---

谢谢，这很有效。但需要注意的是，直接调用addedfile和thumbnail函数会绕过相应的事件，对于我的目的来说这没问题。另一个小问题是：我必须在服务器端生成缩略图才能在缩略图调用中使用，因为直接使用图像会绕过dropzone的客户端缩略图生成，并将全尺寸图像放入预览元素中而不进行裁剪，因此矩形图像会被压缩。 - ralbatross

当我使用这种方法预加载图像时，图像中仍然有一个进度条（使用默认CSS）。如何删除此进度条？ - Milan Maharjan

同时，它在添加文件时没有遵循maxFiles的限制。我将max file设置为1，但当我尝试上传新文件时，它仍然接受了该文件。 - Milan Maharjan

您可以通过添加以下代码来移除进度条：thisDropzone.emit("complete", mockFile);但是我无法调整缩略图的大小以适应框。 - tony

我使用 $(".dz-progress").hide(); 隐藏进度条，如果有帮助的话。 - Wasim A.

Answer 3

我正在尝试这段代码，它对我来说有效：

。

Dropzone.options.myDropzone = {
  init: function() {
    let myDropzone = this;

    // If you only have access to the original image sizes on your server,
    // and want to resize them in the browser:
    let mockFile = { name: "Filename 2", size: 12345 };
    myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos/id/959/600/600.jpg");

    // If the thumbnail is already in the right size on your server:
    let mockFile = { name: "Filename", size: 12345 };
    let callback = null; // Optional callback when it's done
    let crossOrigin = null; // Added to the `img` tag for crossOrigin handling
    let resizeThumbnail = false; // Tells Dropzone whether it should resize the image first
    myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos/id/959/120/120.jpg", callback, crossOrigin, resizeThumbnail);

    // If you use the maxFiles option, make sure you adjust it to the
    // correct amount:
    let fileCountOnServer = 2; // The number of files already uploaded
    myDropzone.options.maxFiles = myDropzone.options.maxFiles - fileCountOnServer;
  }
};

- Abd Abughazaleh