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

Posted 2023-05-07

【中文标题】如何将图像预加载到 dropzone.js

【英文标题】：How do I preload images into dropzone.js

【发布时间】：2014-05-05 04:50:55

【问题描述】：

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

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

它是以编程方式实例化的，因为它是更大表单的一部分。提交表单时，我已经安装它来处理队列。

目标是让我的用户能够使用 dropzone 来管理项目的图像，因此当我加载项目的“编辑/更新”视图时，我想预加载 dropzone 中包含的图像之前已为该项目上传。有没有一种好的方法来实现这一点，以便在将更改提交到图像列表时不会重新上传已经存在的项目？

【参考方案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 函数，如果您有任何为它编写的添加文件事件回调。例如我正在使用 addedfile 事件添加删除按钮，还附加了删除图像功能。

【讨论】：

如果你限制了一个可以上传的文件数量，你必须添加 myDropzone.files.push(mockFile);继续执行此上传限制。

真的，您应该始终包含来自 Kent (myDropzone.files.push(mockFile) 的行，否则调用 myDropzone.removeAllFiles() 不会删除预填充的文件。

【参考方案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 路径，只需使用文件名本身即可。 这行得通

【讨论】：

谢谢，这行得通。不过应该注意的是，像这样直接调用 addedfile 和 thumbnail 函数会绕过相应的事件，这对我的目的来说很好。另一个怪癖：我必须在服务器端生成缩略图以在缩略图调用中使用，因为使用图像直接绕过 dropzone 的客户端缩略图生成，只是将全尺寸图像粘贴到预览元素中而不进行裁剪，所以矩形图像会被压扁。

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

在添加这样的文件时，它也不遵循 maxFiles。我的最大文件为 1，当我尝试上传新文件时，它会接受该文件。

可以通过添加 thisDropzone.emit("complete", mockFile); 来移除进度条；但是我不能不调整缩略图的大小以适应框

如何改用ajax请求？

【参考方案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;
  
;