5

侥幸我意识到了一个问题，这会导致我的应用程序出现大问题。

我在这里有我的应用程序，它将上传视频。应用

我遇到的问题是，如果您上传视频，然后单击Add Question按钮将另一个文件输入附加到新行中，则新行中的Upload按钮不会被禁用，这意味着您可以上传多个我不想要的文件因为它将停止第一个文件上传以停止上传，如果用户尝试上传多个大文件，系统可能会崩溃。我的问题是，如果我点击Add Question按钮，如果文件正在上传，那么附加行中的上传按钮应该被禁用，直到上传完成？

要使用应用程序，请按照以下步骤操作：

  1. 单击Add Question两次以追加 2 个新表行。在每个表格行中，您将看到一个文件输入。

  2. 在第 1 行的文件输入中选择一个视频（我选择了一个合适大小的视频，以便在您完成其他步骤时上传文件），然后单击Upload以上传视频。您现在将看到在Upload上传视频时按钮被禁用

  3. 现在，当视频上传时，再次单击Add Question按钮以附加另一行。现在您将看到Upload文件上传时新附加行中的按钮未被禁用。如果正在上传文件，我希望禁用此按钮和附加的其他上传按钮。

下面是相关代码，它从Add Question按钮附加表格行：

function GetFormVideoCount(){ 
  return $('.videouploadform').length + 1;
}


var qnum = 1;
var qremain = 5;

function insertQuestion(form) {   

    if (qnum > 5) {
    return;
}


    var $tbody = $('#qandatbl_onthefly > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $video = $("<td width='17%' class='video'></td>"); 

              $('.num_questions').each( function() {

    var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" + 
    "<p class='videof1_upload_form'><label>" + 
    "Video File: <input name='fileVideo' type='file' class='fileVideo' /></label><br/><br/><label class='videolbl'>" +  
    "<input type='submit' name='submitVideoBtn' class='sbtnvideo' value='Upload' /></label>" + 
    "<p class='videof1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /></p>" +
    "<input type='hidden' class='numvideo' name='numvideo' value='" + GetFormVideoCount() + "' />" + </p>" +
    "<iframe class='upload_target_video' name='upload_target_video' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>"); 

    $video.append($fileVideo);


    $tr.append($video);  
    $tbody.append($tr); 


}

下面是相关代码，当它开始文件的上传过程时，它会在已附加的行中禁用上传按钮：

   function startVideoUpload(videouploadform){

             sourceVideoForm = videouploadform;

            $(".sbtnvideo").attr("disabled", "disabled");


    }); 

          return true;
    }

下面是上传完成后的函数相关代码：

function stopVideoUpload(success, videoID, videofilename){


      $(".sbtnvideo").removeAttr("disabled");


      return true;   
}

以下是视频上传点击处理程序：

   function videoClickHandler(videouploadform){ 
      if(videoValidation(videouploadform)){ 
          window.lastUploadVideoIndex = $('.videouploadform').index(videouploadform);
          return startVideoUpload(videouploadform); 
      } 
      return false;
  }

更新：

function startVideoUpload(videouploadform){


               $(".sbtnvideo").click(function(event){
               $(".sbtnvideo").attr("disabled", "disabled");
    event.preventDefault();
    });

       return true;   
    }

    function stopVideoUpload(success, videoID, videofilename){


                $(".sbtnvideo").click(function(event){
                $(".sbtnvideo").removeAttr("disabled");
    return true;
});


          return true;   
    }
4

1 回答 1

1

您可以阻止按钮的默认行为，然后稍后重新启用它。

$(".sbtnvideo").click(function(event){
    event.preventDefault();
});

$(".sbtnvideo").click(function(event){
    return true;
});
于 2013-01-30T19:41:23.780 回答