javascript - Blueimp 文件 uploader 正在提交多次

Question

我没有构建我们网站的这一部分，但因为其他开发人员已被拉入另一个项目，所以我的工作就是解决这个问题。基本上我们使用基本的 blue imp 文件 uploader 插件通过 ajax 提交文件。当我第一次选择文件并上传时，一切正常。当我选择一个新文件并上传时，它会提交两次。一个包含第一个文件，一个包含第二个文件。如果我之后选择一个新文件，它将提交 3 次，依此类推。如果我放弃该文件而不是上传它，也会发生同样的情况。我无法，我一生都无法弄清楚是什么触发了它多次运行，而且我没有在网上得到任何帮助。

<section class="add-document editable">
          <form id="add-new-doc" enctype="multipart/form-data" action="" data-project="projectid" class="document-upload">
            <div class="hidden">
              <div class="row">
                <div class="col-xs-12">
                  <h3 class="editcue">Add a new document</h3>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12 col-sm-4">
                  <label for="item-title">Document Title</label>
                </div>
                <div class="col-xs-12 col-sm-8">
                  <input type="text" name="item-title" placeholder="Title" value="" data-type="">
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12 col-sm-4">
                  <label for="file">Related Document</label>
                </div>
                <div class="col-xs-12 col-sm-8">
                  <div class="upload-button"><span class="alt">Selected file: Individual_Check_Stub2015_11_13_04_15_25_218.PDF</span>
                    <input type="file" id="fileupload" name="file" accept=".doc,.docx,.pdf,.txt,.jpg,.png,.xls,.xlsx,.csv,.ppt,.zip" data-url="">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12 col-sm-4">
                  <label for="expr-or-issue-date">Date (optional)</label>
                </div>
                <div class="col-xs-12 col-sm-8">
                  <input type="date" name="expr-or-issue-date" value="" data-type="">
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12 col-sm-4">
                  <label for="restrict-to-subsidiary">Restrict this document (optional)</label>
                </div>
                <div class="col-xs-12 col-sm-8">
                  <!-- multi-select filterable select-->
                  <select data-placeholder="Choose a Subsidiary" name="restrict-to-subsidiary" multiple="" data-url="../_res/js/json/subsidiary-doc.json" class="select-restrict select2-hidden-accessible" tabindex="-1" aria-hidden="true"><option value="itemid-001" title="itemid-001">Appleton Corporation</option><option value="itemid-003" title="itemid-003">Daniel O'Connell's Sons</option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 503px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="Choose a Subsidiary" style="width: 469px;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                  <!-- end multi-select-->
                </div>
              </div>
              <!-- Edit Actions: Save or Cancel Edit Buttons-->
              <div class="actions">
                <div class="row">
                  <div class="col-xs-12 col-sm-4">
                    <div class="discarddoc"><span>Discard document</span></div>
                  </div>
                  <div class="col-xs-12 col-sm-4">
                    <div class="newdoc"><span>Upload document
                        <!-- End C-02--></span></div>
                  </div>
                  <div class="col-xs-12 col-sm-4"></div>
                </div>
              </div>
              <!-- End edit actions-->
            </div>
          </form>
        </section>

这是js

// upload documents on submit
function uploadThis(){
    var $form = $('input[type=file]').closest('form'),
            userid = $form.data('user'),
            url = $form.attr('action'),
            uploadButton = $form.find('.new-doc span');

            $('input[type=file]').fileupload({

              url: url,
              multipart: true,
              singleFileUploads: true,
              add: function (e, data) {
                        data.context = $form.find('.newdoc').click(function () {
                            console.log($(this));
                            data.submit();
                            return false;
                        });
              },
               change: function (e, data){
                    if($(this).attr('id') === "image-input"){}
                    else{
                        var thisform = $(this).closest('form');
                        $.each(data.files, function(index,file){
                                data.context = thisform.find('.upload-button span').text('Selected file: ' + file.name);
                        });
                        }
                },
              done: function (e, data) {
                        var thisform = $(this).closest('form');
                                 data.context = thisform.find(".upload-button input").find(".files").empty();

                        $(this).wrap('<form>').closest('form').get(0).reset();
                          $(this).unwrap();
                                  },

                                  stop: function(e, data) {


                                            },
                                  failed: function (e, data) {
                                    data.context.text('Unable to upload document.');
                                  }
            });

}

// document uploads 
$('.document-upload').each(function(){

    var userid = $(this).data('user');

    //some code retracted to keep it simpler

    uploadThis();

});
// end document uploads

// discard doc
$('#add-new-doc .discarddoc').on('click', function(e){
    e.preventDefault();

    var $this = $(this),
            $form = $(this).closest('form');

    $form[0].reset();
    $form
        .find('.upload-button span')
        .text('Select Document');
});

对格式感到抱歉，我已尽力修复它。任何见解都会令人惊奇。谢谢

Answer 1

我能够通过在 add 方法中动态创建提交按钮来解决此问题。似乎之前它向同一个按钮添加了多个事件监听器，这就是触发多个提交的原因。