Question

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

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

Answer 2

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

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

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

Answer 3

onselect事件：

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

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

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

如何在进度条显示之前阻止表单提交

3 个答案: