3

フォーム内にファイル入力を含むフォームがあり、さらに重要なことに、ファイルのアップロードをキャンセルするキャンセル ボタンがあります。

var $fileImage = $("<form action='imageupload.php' method='post' class='imageuploadform' ...><label>" + 

"Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label>" +

"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 

"</p><p class='imagef1_cancel' align='center'><label>" +

"<input type='button' name='cancelImageBtn' class='cancelimage' value='Cancel' /></label>" + 
"</p></form>");

これで、サーバーへのファイルのアップロードなどすべてが完了しました。しかし、私には1つの問題があります。

私が抱えている問題は、キャンセルしてアップロードする方法がわからないことです。ユーザーが「キャンセル」ボタンをクリックしても、現時点では何も起こりません。私が望んでいるのは、ユーザーが「キャンセル」ボタンをクリックすると、「stopImageUpload()」関数に移動し、ファイルのアップロードを停止することです。しかし、どうすればこれを行うことができますか?

以下はキャンセルボタン機能を作成しようとする試みですが、「キャンセル」ボタンをクリックしても何も起こりません。

   $(".cancelimage").on("click", function(event) {
    console.log("clicked");
    event.preventDefault();
    stopImageUpload(success);
     });

以下は、キャンセル ボタン機能が配置されている場所と、ファイルのアップロードを開始および停止する機能を示す完全なコードです。

          function startImageUpload(imageuploadform){

$(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
sourceImageForm = imageuploadform;

                $(".cancelimage").on("click", function(event) {
                console.log("clicked");
                event.preventDefault();
                stopImageUpload(success);
             });

                  return true;
            }

            function stopImageUpload(success){

                  var result = '';
                  if (success == 1){
result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
                  }

                  else {
result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
                  }

$(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');          
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');


                  return true;   
            }
4

4 に答える 4

5

可能な解決策があります。あなたはそのようにすることができます：

$("#cancel").click(function(){
  $("#inputfile").remove();
  $("#containerof_inputfile").append("<input type=\"file\" id=\"inputfile\"/>");
});
于 2014-08-27T05:56:06.573 に答える
1

フォームの送信が開始されると、新しいページに移動せずに送信を停止できるとは思えません。

キャンセル ボタンを同じページにリダイレクトするが、クエリ文字列にフラグを使用して、キャンセル通知を表示するために使用できる場合、うまくいく可能性があります。

于 2012-04-14T13:27:03.297 に答える
1

jQuery は、この種の作業を容易にします。返された jQuery オブジェクトで中止を呼び出すことができます。本当に独自のものを作成したい場合は、jQuery コードを調べて、それがどのように行われるかを確認できると思います。

追記：気になって調べてみました。Abort は Javascript の XMLHttpRequest 関数のメソッドです。

于 2012-04-14T13:27:43.210 に答える