Question

我正在使用dropzone.js在轨道上的ruby上传图片。这是我的HTML代码

<div class="row">
  <div class="col-md-12" id="drop-zone-container">
    <%= form_tag '/settlement_proofs', method: :post, class: 'dropzone form', id: 'media-dropzone' do %>
        <div class="fallback">
          <%= file_field_tag 'attachment', multiple: true%>
        </div>
    <% end %>
  </div>
</div>

我将dropzone初始化为

$("#media-dropzone").dropzone({
    acceptedFiles: pg.constants.ACCEPTED_FORMAT,
    maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB
    maxFiles: pg.constants.ATTACHMENT_MAX_SIZE,
    addRemoveLinks: true,
    removedfile: function (file) {
        if (file.xhr.responseText.length > 0) {
            var fileId = JSON.parse(file.xhr.responseText).id;
            $.ajax({
                url: pg.constants.url.SETTLEMENT_BASE_URL + fileId,
                method: 'DELETE',
                dataType: "json",
                success: function (result) {
                    $('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', ""));
                    $('#settlement_proof_status span').fadeOut(0);
                    var _ref;
                    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

                },
                error: function () {
                    $('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn();
                }

            });
        }

    },
    init: function () {

        this.on("success", function (file, message) {
            debugger;
            appendContent(message.attachment.url, message.id);
        });

        this.on("error", function (file, message) {
            $('#settlement_proof_status span').text(message).fadeIn();
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        });
        $('#settlement_invoice_submit_btn').click(function () {
            $("#new_settlement_invoice").submit();
        });
        $('#uploaded_attachment').change(function () {
            if (this.value.length == 0) {
                this.removeAllFiles();
            }
        });
    }
});

通过AJAX提交表单后，我需要使用默认图像重置dropzone字段。

Answer 1

this.on("complete", function(file) { 
   this.removeAllFiles(true); 
})

在INIT函数中编写上述代码。

这将删除dropzone中的所有文件，并将dropzone重置为初始状态。

http://www.dropzonejs.com/#event-reset

Answer 2

最后，我自己解决了这个问题。首先，我从其parents元素中删除表单。它删除了现有的dropzone实例。然后我使用jQuery创建表单并再次重新初始化dropzone。这是我的完整代码

std::uniform_real_distribution<> randomizer(0, 100);

Answer 3

试试这个：

//DropZone Initiation Section
init: function() {
    this.on('success', function(file, json) {
    });

    this.on('addedfile', function(file) {
    });

    this.on('drop', function(file) {
    });

    this.on('removedfile', function(file) {
    });

    this.on('complete', function(file) {
    });

    this.on('error', function(file) {
    });

    this.on('resetFiles', function() {
        if(this.files.length != 0){
            for(i=0; i<this.files.length; i++){
                this.files[i].previewElement.remove();
            }
            this.files.length = 0;
        }
    });
}

function JS_ClearDropZone() {
    //DropZone Object Get
    var objDZ = Dropzone.forElement("div#objDropzone");
    //"resetFiles" Event Call
    objDZ.emit("resetFiles");
}

Answer 4

这里的每个答案都非常复杂。我在一个模态中有一个dropzone，带有一些ajax来绘制页面上的上传/完整文件。如果用户将另一个图像添加到库中，我想在不刷新页面的情况下重置该模式中的dropzone。答案？请在此处查看我的解决方案https://stackoverflow.com/a/45247184/179571

Answer 5

我从Senug Nam Kim和J Santosh那里得到了一个例子：

// Where .reset-dz is the class of a button
$('.reset-dz').on('click', function(e){
    var myDropzone = Dropzone.forElement("#user-post-submit");
    myDropzone.removeAllFiles(true); 
});

Answer 6

基于脚本的简单解决方案。对于版本5.4.0

在脚本中添加它以连接dropzone.js

$('button#submit_button').click(function () { $('.dz-preview').empty(); $('.dz-message').show(); });

然后在dropzone.js中添加行>>> $（'。dz-message'）。hide（）;

在返回_this3.updateTotalUploadProgress（）;之前（第1277行）

this.on("uploadprogress", function () { $('.dz-message').hide(); return _this3.updateTotalUploadProgress(); });

Answer 7

这里的每个解决方案都不适合React，任何人都可以解释一下如何使用React来完成这是在react中上传后删除文件的代码

...
...


const initCallback = (dropzone) => {
    myDropzone = dropzone
  }

const eventHandlers = {
  init: initCallback,
  queuecomplete: () => {
    if (myDropzone && clearDropzone) {
      myDropzone.removeAllFiles()
    }
  }
}

....
...

提交表单后重新初始化/重置dropzone

7 个答案: