在Dropzone.js中为预览区域添加ID

Question

我正在尝试在Dropzone.js中为每个上传的文件添加id属性，以便稍后可以对其进行排序。

这是我的代码：

Dropzone.options.pictureDropzone = {
  paramName: "file",
  addRemoveLinks: true,
  init: function() {
    this.on("success", function(file, response) {
        file.serverId = response.id;
        $(file.previewTemplate).find('.dz-preview').attr('id', "document-" + file.serverId);
    });
  }
};

这行代码

$(file.previewTemplate).find('.dz-preview').attr('id', "document-" + file.serverId);

应该添加id，但是没有任何作用。也尝试使用prop()。

如果我选择不同的元素，它可以正常工作。例如，对于.dz-details，这样可以工作。

$(file.previewTemplate).find('.dz-details').attr('id', "document-" + file.serverId);

但我似乎找不到把它添加到dz-preview元素的方法。


HTML结构如下：

<div class="dz-preview dz-processing dz-image-preview dz-success">
    <div class="dz-details"> ... </div>
    <div class="dz-progress"> ... </div>
    <div class="dz-success-mark"> ... </div>
</div>

感谢您的帮助 :)

- ktw16

Answer 1

我知道这已经有点过时了，但如果还有人在寻找答案：

      this.on("success", function(file, response) {
          file.previewElement.id = response.id;
      });

- codenathan

---

如果我想在数据库中的现有图像上放置ID，该怎么办？ - Angger

@Angger 请查看处理现有服务器文件的init函数的相关票证：https://dev59.com/qI3da4cB1Zd3GeqPzGX6#31627155 然后向 this.addCustomFile函数传入第四个参数id，在函数中添加 file.previewElement.id = id; ，接着在通过服务器代码（PHP等）获取的图像中，在for循环中添加id。 - Ryan

多个文件怎么样？ - Ray Coder

Answer 2

将previewElement转化为jQuery对象并执行任何操作。

   this.on("success", function(file, response) {
      $(file.previewElement).attr("id", response.id);
  });

- Lovepreet Singh

---

file.serverID = response.id 我是这样使用的。 - Bira

如何从removedfile中获取它？@Bira - Ray Coder

Answer 3

this.on("success", function(file, response) {
    file.serverId = response.id;
    $(".dz-preview:last-child").attr('id', "document-" + file.serverId);
});

- Bryan Foong

---

如果用户拖入多个文件，这将失败并且会非常显眼。 - Szczepan Hołyszewski

该库似乎不支持访问实际的底层jQuery对象。可以通过另一个事件监听器向文件对象添加属性：http://pastebin.com/p0DCdTrf - Dmitri Chebotarev

那么如何处理多个文件呢？@SzczepanHołyszewski - Ray Coder

Answer 4

我曾经遇到过类似的问题，但是通过在JavaScript中声明一个变量来尝试解决，以下是代码：

$("#fileUpload${dropdown}").dropzone(
                {

                    url : "uploadAdditionalFile?name="+$("#fileUpload${dropdown} div:first-child").prop('id'),
                    addRemoveLinks : true,
                    maxFiles : 1,
                    init : function() {
                        var imageId = $("#fileUpload${dropdown} div:first-child").prop('id');
                        this.on("maxfilesexceeded",
                            function(file) {
                                    alert("Only one file can be uploaded at a time");
                                    this.removeFile(file);
                                        });
                                this.on("addedfile",
                                        function(file) {
                                            switch (file.type) {
                                            case 'application/pdf':
                                                this.emit("thumbnail",file,"/sbms/static/img/pdf.png");
                                                break;
                                            case 'application/msword':
                                                this.emit("thumbnail",file,"/sbms/static/img/word.png");
                                                break;
                                            }
                                        }
                                );
                                 this.on('removedfile', function(file){
                                     $.ajax({
                                            type : "GET",
                                            url : "removeAdditionalMediaPreviewForm?id="+imageId,
                                            dataType : "json",
                                            async : false,
                                            success : function(response) {
                                                if (response.status == 'SUCCESS') {
                                                    alert("File removed successfully.")
                                                }else {
                                                    alert("File not removed successfully.")
                                                }
                                            }
                                        });
                                }); 

                    },

                    success : function(file,response) {
                        var imgName = response;
                        file.previewElement.classList.add("dz-success");
                        console.log("Successfully uploaded :"+ imgName);
                    },
                    error : function(file,response, xhr) {
                        alert("Unable to upload file. Please check if it is a valid doc or pdf file.");
                        this.removeFile(file);
                    }
                });

imageId是一个变量，用于存储id，并在文件删除时后续使用。

- jACOB

Answer 5

如果用户放置多个文件，这将失败得惊人。(Szczepan Hołyszewski Dec 17 '15 at 18:45);

如果设置选项uploadMultiple: false，BryanFoong的答案不会失败。默认情况下设置为此选项。在这种情况下，Dropzone为每个文件单独发送请求到服务器。因此，“success”事件会触发每个单独的文件。

如果设置了uploadMultiple: true。Dropzone将为所有文件发送单个请求到服务器。并且“success”事件将只触发一次。以下代码将处理该事件。

    YourDropzoneInstance.on("success", function(file, response) {
        response.files.forEach(function(file) {
            file.previewTemplate.id = file.id;
        })
    })

你需要再次从服务器返回文件数组。 在PHP中，它看起来像这样

    function yourFileUploadHandler() {
        ...
        // your server file upload implementation        

        $response = [
            "files" => [
                ["id" = 1, ...],
                ["id" = 2, ...],
                ...
             ],
        ];
    
        return json_decode($response);
    }

- adjustment layer