在 Dropzone.js 中為預覽 div 添加 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>

感謝您的幫助 ：）

Answer 1

我知道這很舊，但如果有人仍在尋找答案：-

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

Answer 2

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

Answer 3

將previewElement轉換為 jQuery 對象並執行任何操作。

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

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 的變量，稍后在刪除文件時使用。

Answer 5

如果用戶刪除多個文件，這將嚴重失敗。（Szczepan Hołyszewski 2015 年 12 月 17 日 18:45）；

如果您設置選項uploadMultiple: false BryanFoong 的回答不會失敗。 默認情況下是這樣設置的。 在這種情況下，Dropzone 為每個文件向服務器發送單獨的請求。 因此，每個單獨的文件都會觸發“成功”事件。

如果uploadMultiple: true 。 Dropzone 將向服務器發送所有文件的單個請求。 而“成功”事件將觸發一次。 下面的代碼將處理它。

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

同樣，您需要從服務器文件數組返回。 在 PHP 中它看起來像

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

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