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是如此强大和令人敬畏，你可以做任何事情。
要遵循的步骤 - ＆gt;

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

            });

        });
}

注意：不要在文件名中取整个文件网址路径，只需获取文件名本身即可。
这是有效的

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;
  }
};

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

3 个答案: