0

ユーザーが「キャンセル」ボタンをクリックしたときに、サーバーへのファイルのアップロードをキャンセルする方法を見つけようとしています。これを実現する最も一般的な方法は、ユーザーが [キャンセル] ボタンをクリックしたときに iframe を削除することです。

ユーザーが「キャンセル」ボタンをクリックしたときに、サーバーへのファイルのアップロードを停止するのにこれが良い方法であるかどうかを知りたいだけですか? ユーザーが「キャンセル」ボタンをクリックしても、ユーザーが必要に応じて後で別のファイルをアップロードできるようにしたいので、iframeを削除しても永続的ではないことを願っています。

これが最善の方法である場合、「キャンセル」ボタンがクリックされたときにiframeを削除する方法を知っている人はいますか?

以下は、アップロードを開始するコードと、キャンセル ボタン関数が格納されているコードです。

function startImageUpload(imageuploadform){

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


              $(".imageCancel").click(function() {
              $('.upload_target').get(0).contentwindow
          return stopImageUpload();
    });

      return true;
}

以下は、ファイルのアップロードが停止したときのコードです。

function stopImageUpload(success, imagefilename){

      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label>');
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');


      return true;   
}

フォームコードも以下のとおりです。

     var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return startImageUpload(this);' class='imageuploadform' >" + 
//Above is form tag
        "<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><label>" + 
//Above is where it displays loading bar while file is uploading
        "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + 
//Above is File Input
        "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
//Above is Upload Button
        "</p><p class='imagef1_cancel' align='center'><label>" + 
        "<input type='button' name='imageCancel' class='imageCancel' value='Cancel' /></label>" + 
//Above is Cancel Button
        "<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>"); 
//Above is the iframe which does the transporting
4

1 に答える 1

2

ボタンがあれば

HTML

<button id="cancel">Cancel</button>

とJavaScript

$("#cancel").click(function() {
    $("iframe[name='upload_target']").attr("src", "javascript:'<html></html>'");
    $("iframe[name='upload_target']").remove(); // not needed I think, but anyway it is good to keep the DOM clean
});

ユーザーがそのボタンをクリックするとsrc、iframe の属性が、混合コンテンツの警告を作成しないバリアントにリセットされます。

于 2012-05-04T22:42:41.977 に答える