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

标签 javascript jquery ruby-on-rails dropzone.js

我正在使用 dropzone.js在 ruby​​ on rails 上上传图片。这是我的 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 字段重置为默认图像。

最佳答案

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

将以上代码写入INIT函数中。

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

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

关于javascript - 提交表单后重新初始化/重置 dropzone,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31380478/

相关文章:

javascript函数将括号外的值添加到括号内的值

具有唯一键的javascript和es6过滤器数组

jQuery 选择以特定开头的每个 id

ruby-on-rails - Rails RSpec 路由 : Testing actions in :except do NOT route

ruby-on-rails - 为什么 rspec 找不到我不需要参数的路线?

javascript - 如何在手动调整一列宽度后调整 Angular ui-grid 剩余列的大小?

javascript - React/Firebase 错误 : Cannot read property 'database' of undefined

javascript - 更改 CSS,其中 font-weight :800

ajax - 将 SharePoint SOAP 与 jQuery GetListItems 一起使用 - 简单但无法解决!

ruby-on-rails - ActiveRecord::StatementInvalid: 找不到表 'users'