如何防止在进度条显示之前提交表单答案

【问题标题】：How to prevent form submission before progress bar display如何防止在进度条显示之前提交表单
【发布时间】：2010-10-11 15:04:33
【问题描述】：

我正在将 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();
        }
    });

【问题讨论】：

标签： jquery uploadify

【解决方案1】：

您可以检查，当用户尝试提交表单时是否存在上传项目

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

编辑： 刚刚检查了documentation

为什么不禁用提交按钮，当一个文件被选中并在 onAllComplete 上启用它。

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

【讨论】：

上述方法均无效。当用户在显示进度条之前单击提交按钮时，上传队列没有任何内容。 onSelectOnce 也不起作用。还有其他想法吗？如何阻止用户提交表单？
能否提供更多细节？ “onSelectOnce 也不起作用”并不是很有帮助。选择文件时触发该事件。所以这个事件发生在上传开始之前。这是反应的最早机会。
我的意思是即使我禁用了按钮：
$("#btn_submit").attr("disabled", true);在 onSelect 上，我仍然可以在显示进度条之前同时提交表单
提交按钮是否被禁用？有没有其他方式提交表格？你能给我们提供一个例子来看看代码吗？

【解决方案2】：

只是一个摘录，但这大约是我正在使用的......

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

我不确定你为什么有 6 个浏览按钮.. 但我认为在这种情况下这并不重要。

【讨论】：

感谢您的解决方案。但是 onInit 仅在表单提交必须选择文件时才有用。在我的情况下，文件选择是可选的，如果用户选择文件，它应该与表单一起提交。在上面的代码中，uploadbtn 一直被禁用，直到用户选择一个文件。还有其他想法吗？
啊，好吧，我没听懂你原来的问题 - 但该按钮默认情况下应该处于活动状态，并且仅在一些点击“浏览”和文件完成设置在队列中之间禁用.
不，不幸的是，我看到按钮一直被禁用（如果我在 onInit 上禁用它），直到用户选择一个文件。这样，提交按钮将仅在选择至少一个文件时启用，因此文件选择将是强制性的，这不是我们的要求。在我的情况下，文件选择是可选的。还有其他建议吗？我需要让它工作，因为这是一个实时应用程序，用户很有可能选择一个文件并立即单击提交按钮而不等待显示进度条并且永远不会上传附件。请帮助！跨度>
我认为 onInit 的问题在于它是在最初加载脚本并且在屏幕上呈现 Flash 文件时触发的。一旦页面加载，就会发生这种情况。所以提交按钮被禁用，只有在选择文件时才启用。 RonnieSan - 你能解决这个问题吗？

【解决方案3】：

onselect 事件：

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

遗憾的是，仅在 swf 检查文件大小等之后才会触发。这就是为什么在文件选择和实际选择事件之间有很短的时间，用户可以提交表单。

如果有人知道无论如何要在“uploadify swf”打开对话框之前获得一个事件，那将不胜感激。

【讨论】：