Dropzone.js 5.0 - 使用现有图像并将数据发送到服务器

Question

我已成功使用 Dropzone 从我的服务器显示现有文件。但是，当我提交表单时，只有新文件提交到服务器，所以我不知道用户是否删除了任何文件。本质上，我想发送当前显示的所有文件的数据，包括“模拟”文件和新上传的文件。

我正在使用 autoProcessQueue: false 以便我可以有一个单独的提交按钮来将数据发送到服务器。

我的代码：

    Dropzone.options.createListingForm = {

        autoProcessQueue: false,
        uploadMultiple: true,
        previewsContainer: '.create-listing-form-uploads',
        parallelUploads: 100,
        maxFiles: 100,
        addRemoveLinks: true,

        init: function () {
            var thisDropzone = this;
            var photos = form.data('photos');
            $.each(photos, function (key, photo) {
                var mockFile = {
                    name: photo.name,
                    size: photo.size,
                    type: photo.type,
                    accepted: true
                };

                thisDropzone.files.push(mockFile);    // add to files array
                thisDropzone.emit("addedfile", mockFile);
                thisDropzone.emit("thumbnail", mockFile, photo.path);
                thisDropzone.emit("complete", mockFile);

            });

        }
    };

    form.on('click', '.create-listing-form-save-photos', function () {

        $('.dropzone').get(0).dropzone.processQueue();

        return false;
    });

感谢我对代码第一部分的回答： https://stackoverflow.com/a/45701181/5482719

Answer 1

每次从 dropzone 中移除/删除文件（包括模拟文件）时，都会触发 removedfile 事件。

您可以使用此事件从您的服务器中删除已删除的文件，如下所示：

    myDropzone.on("removedfile", function(file) {
        // 'file' parameter contains the file object.
        console.log('Removed File', file);

        // Delete file from server
        $.ajax({
            type: 'POST',
            url: 'url/that/handles/delete',
            data: {
                fileName: file.name,
            },
            dataType: 'json'
        }).done(function (response) {
            // check repsonse, notify user
        }).fail(function(resp) {
            console.log('xhr failed', resp);
        }).always(function(resp) {
            // do nothing for now
        });
    });

希望对您有所帮助。