2015-11-19 68 views
1

我沒有構建我們網站的這一部分,但因爲其他開發人員已被拉入另一個項目,這是我的工作來解決這個問題。基本上我們使用基本的藍色imp文件上傳插件通過ajax提交文件。當我第一次挑選文件並上傳時,一切正常。當我選擇一個新文件並上傳時,它會提交兩次。第一個文件和第二個文件。如果之後我選擇了一個新文件,它會提交3次,等等。如果我放棄文件而不是上傳文件,會發生同樣的情況。我不能,因爲我一生都在想什麼觸發它多次運行,並且我在線上沒有任何幫助。Blueimp File Uploader多次提交

<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'); 
}); 

對不起,我試圖修復它儘可能的格式。任何見解都會很棒。謝謝

回答

1

我能夠通過在add方法內動態創建提交按鈕來解決此問題。它似乎在將多個事件偵聽器添加到同一個按鈕之前,這就是觸發多個提交的內容。