如何在進度條顯示前防止表單提交

我正在使用Uploadify進行實時應用程序，至此它的工作正常，除了這一個問題。我有6個瀏覽按鈕可以上傳6個文件（每個文件有多個'true'），我的頁面上也有一個提交按鈕（JSP）。如何在進度條顯示前防止表單提交

如果用戶在這些瀏覽按鈕的任何一個上選擇了一個文件，那麼在選擇該文件後顯示進度欄之前會有一些延遲。與此同時，如果用戶點擊提交按鈕，表單甚至在進度條顯示之前被提交，並且沒有文件被上傳。我查看了可用的方法，但仍無法找到解決方案。

我非常感謝並期待在這件事情上有任何幫助。

謝謝。

請在下面找到我的代碼：

$("#vehShortTestAttachment1").uploadify({ 
     'uploader' : '../pts/swf/uploadify.swf', 
     'script' : url, 
     'cancelImg' : '../pts/images/cancel.png', 
     'wmode'  : 'transparent', 
     'hideButton': 'true', 
     'width'  : 67, 
     'height' : 20, 
     'multi'  : true, 
     'sizeLimit' : 20971520, 
     'fileDesc' : 'jpg, gif, doc, ppt, jpeg, txt, pdf', 
     'fileExt' : '*.jpg;*.gif;*.doc;*.ppt;*.jpeg;*.txt;*.pdf', 
     'onCancel': function() { 
      $('#attachments-div-validation').html(""); 
      isFileBig = false; 
     }, 
     'onSelectOnce': function (event, queueID, fileObj) {   
      $("#attachments-submit-case-button").attr("disabled", true); 
     }, 
     'onSelect': function (event, queueID, fileObj) {   

       $("#attachments-div-validation").html(div_validation_red_start + "<B>You can select other files (or) Submit the Case now.</B>" + div_validation_red_end); 
      $("#attachments-div-validation").show(); 

      if (fileObj.size > 20971520) 
      {    
       $('#attachments-div-validation').html(div_validation_red_start + "Size of the file: " + fileObj.name + " exceeds 20MB and this file can not be uploaded. <br>Please click on the X button on the progress bar for this file to cancel the upload. <br>Please click on BROWSE button again to upload another file." + div_validation_red_end); 
       $('#attachments-div-validation').show();  
       isFileBig = true;          
      } 
     }, 
     'onComplete': function(event, queueID, fileObj, response, data) 
     {        
      if(response == 'OK') { 
       $('input[name=fileUploadStatus]').val(response); 
       $("#vehShortTestAttachment1").uploadifySettings('script', url); 
      } 
      else { 
       $('input[name=fileUploadStatus]').val(response); 
       $('#vehShortTestAttachment1').uploadifyCancel(queueID); 
       $('#vehShortTestAttachment1').uploadifyClearQueue();      
      } 
     }, 
     'onAllComplete':function(event, data) 
     {      
      $("#attachments-submit-case-button").attr("disabled", false); 

      if(!isFileBig) 
       submitFormDetails(); 
     } 
    });

來源

2010-10-11 Radhika

你可以檢查，如果有存在上傳項，當用戶試圖subbmit形式

$("form").submit(function(evt) { 
    if ($(".uploadifyQueueItem").children().length > 0) { 
     evt.preventDefault(); 
     alert("There are still files to upload..."); 
    } 
    //... 
});

編輯： 剛纔檢查documentation

爲什麼不禁用提交按鈕，當一個文件被選中並且ena在onAllComplete上啓用它。

$("#fileInput").uploadify({ 
    //... 
    onSelectOnce: function() { 
     $("#btn_submit").attr("disabled", true); 
    }, 
    onAllComplete: function() { 
     $("#btn_submit").attr("disabled", false); 
    } 
});

來源

2010-10-11 17:01:48 Andreas

優秀的@John_Doe：D – TheVillageIdiot 2010-10-11 17:39:01

上述兩種方法都無效。即使在進度條顯示之前用戶單擊提交按鈕，上傳隊列也沒有任何內容。 onSelectOnce也沒有工作。任何其他想法？我如何阻止用戶提交表單？ – Radhika 2010-10-11 17:50:00

你能否提供一些更多的細節？「onSelectOnce也不起作用」並不真正有幫助。事件觸發，當文件被選中時。所以這個事件發生在上傳開始之前。這是最早的反應機會。 – Andreas 2010-10-11 18:09:22

只是一個提取物，但是這大約是我使用的是什麼...

onInit   : function () { 
     $('#uploadbtn').attr('disabled', true); 
    }, 
    onSelect   : function (a, b, c, d, e) { 
     $('#uploadbtn').attr('disabled', false); 
    },

我不知道爲什麼你有6個瀏覽按鈕..但我不認爲這在這種情況下很重要。

來源

2010-10-18 15:12:45 aland

感謝您的解決方案。但onInit僅在文件選擇對錶單提交是強制性的時纔有用。在我的情況下，文件選擇是可選的，如果用戶選擇文件，它應該與表單一起提交。在上面的代碼中，uploadbtn一直被禁用，直到用戶選擇一個文件。任何其他想法？ – Radhika 2010-10-18 18:29:26

啊，好吧，我從你原來的問題不明白 - 但按鈕應該是默認情況下是活動的，只有在點擊「瀏覽」和文件已經在隊列中完成設置之間關閉。 – aland 2010-10-18 21:53:15

不幸的是我看到按鈕一直禁用（如果我在onInit上禁用它），直到用戶選擇一個文件。通過這種方式，只有在選擇至少一個文件時才能啓用提交按鈕，因此文件選擇將是強制性的，這不是我們的要求。在我的情況下，文件選擇是可選的。還有其他建議嗎？我需要這樣做，因爲這是一個實時應用程序，並且很有可能用戶選擇一個文件並立即單擊提交按鈕而不等待進度條顯示，並且附件永遠不會上傳。請幫助！ – Radhika 2010-10-20 14:29:44

的ONSELECT事件：

'onSelect': function (e, fileID, fileObj) { 
     $(".editor-form-submit").show(); 
}

黯然僅火災後的SWF完成檢查文件大小等，這就是爲什麼有文件的選擇和實際選擇事件之間的時間很短，在至極用戶可以提交表單。

如果有人知道無論如何要獲得一個事件「在uploadify swf之前」打開對話框，那將不勝感激。

來源

2011-02-02 17:09:17

如何在進度條顯示前防止表單提交

回答

相關問題