Dropzone.js 延迟发布到服务器但允许开始上传

Question

是否可以使用 Dropzone 处理文件，但是等到单击按钮才能post将它们发送到服务器代码？

我试过了autoProcessQueue = false，但是这并没有开始上传，我想开始这个过程（这样我的用户就不必等待），但是没有dropzone.js马上打电话给 url。

    $(".dropzone.song-image").each(function (i) {
        $(this).dropzone({
            url: $(this).data().url,
            addRemoveLinks: true,
            maxFilesize: 20,
            maxFiles: 1,
            acceptedFiles: "image/*",
            dictDefaultMessage: "Add cover image",
            dictInvalidFileType: "Only images are accepted",
            thumbnailWidth: 330,
            thumbnailHeight: 330,
            init: function (file) {
                this.on("thumbnail", function (file, dataUrl) {
                    $(".dropzone.song-image .dz-image").last().find("img").attr({ width: "100%", height: "100%" });
                });
                this.on("success", function (file, response) {
                    $(this.element).siblings("input[type=hidden]").val(response.imageBytes);
                    file.previewElement.classList.add("dz-success");
                    $(".dropzone.song-image .dz-image").css({ "width": "100%", "height": "auto" });
                });
            }
    }
});

Answer 1

我查看了源代码，xhr.Send(form);（发布到您url的服务器）在文件处理完成后立即发送，然后开始上传。

因此，除非有人比我更了解，否则我认为不更改 Dropzone.js 源代码（甚至根本不更改？）是不可能的，我显然不想这样做。

Answer 2

下面是我如何实现延迟上传（例如，通过点击任意按钮启动）：

Dropzone 实施

var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
    paramName: "file", // The name that will be used to transfer the file
    addRemoveLinks: true,
    maxFilesize: 5, // MB
    parallelUploads: 5,
    uploadMultiple: true,
    acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
    maxFiles: 10,
    init: function() {
        this.on("removedfile", function (file) {
            // delete from our dict removed file
            delete addedFilesHash[file];
        });
    },
    accept: function(file, done) {
        var _id = count++;
        file._id = _id;
        addedFilesHash[_id] = done;
    }
});

其他地方

    // get all uploaded files in array
    var addedFiles = Object.keys(addedFilesHash);
    // iterate them
    for (var i = 0; i< addedFiles.length; i++) {
        // get file obj
        var addedFile = addedFiles[i];
        // get done function
        var doneFile = addedFilesHash[addedFile];
        // call done function to upload file to server
        doneFile();
    }

我们覆盖 accept 和 removedFile 函数。在 accept 函数中，我们收集 file 对象和 done 字典中的函数，其中键是 file，值是 done 函数。稍后，当我们准备好上传添加的文件时，我们正在为 dict addedFilesHash 中的所有文件迭代所有 done 函数，它启动带有进度条等的上传进度

Dropzone.js 延迟发布到服务器但允许开始上传

Dropzone.js delay posting to the server but allow uploading to begin

javascript

jquery

dropzone.js