Will removing a iframe stop a file from uploading?

Question

I have been trying to figure out how to cancel a file upload to a server when the user clicks on a "Cancel" button. It seems like the most common method of achieving this could be removing the iframe when the user clicks on the "Cancel" button.

I just want to know if this is a good way in attempting to stop a file uploading into the server when the user clicks on the "Cancel" button? If the user does click on the "Cancel" button then I still want the user to be able to upload another file later on if they wish to so I hope that when removing the iframe it isn't going to be permanent.

If this is the best way to do it then does anyone know how to remove an iframe when the "Cancel" button is clicked on?

Below is the code where it starts the uploading and where the cancel button function is stored in.

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

Below is the code when the file has stopped uploading:

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

The form code is also below:

     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

Answer 1

if you have a button

HTML

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

and a 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
});

and the user clicks that button, the src attribute of the iframe is resetted to a variant that does not create mixed content warnings

Will removing a iframe stop a file from uploading?

Question

1 answers

solution1
2 ACCPTED 2012-05-04 22:42:41

Will removing a iframe stop a file from uploading?

Question

1 answers

solution1 2 ACCPTED 2012-05-04 22:42:41

solution1
2 ACCPTED 2012-05-04 22:42:41