5

たまたま、アプリケーションに大きな問題を引き起こす問題に気付きました。

ここに、ビデオをアップロードするアプリケーションがあります。応用

私が抱えている問題は、ビデオをアップロードしてからAdd Questionボタンをクリックして別のファイル入力を新しい行に追加すると、新しい行のUploadボタンが無効にならないことです。これは、私が望まない複数のファイルをアップロードできることを意味します最初のファイルのアップロードを停止してアップロードを停止し、ユーザーが大きな複数のファイルをアップロードしようとするとシステムがクラッシュする可能性があるためです。私の質問は、Add Questionボタンをクリックすると、ファイルがアップロードされている場合、アップロードが完了するまで、追加された行のアップロード ボタンを無効にする必要があるということです。

アプリを使用するには、次の手順に従います。

  1. を 2 回クリックして、Add Question2 つの新しいテーブル行を追加します。テーブルの各行には、ファイル入力が表示されます。

  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 に答える