Will removing a iframe stop a file from uploading?
<p>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.</p>

<p>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.</p>

<p>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?</p>

<p>Below is the code where it starts the uploading and where the cancel button function is stored in.</p>

<pre><code>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;
}
</code></pre>

<p>Below is the code when the file has stopped uploading:</p>

<pre><code>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 + '&lt;label&gt;Image File: &lt;input name="fileImage" class="fileImage" type="file"/&gt;&lt;/label&gt;&lt;br/&gt;&lt;br/&gt;&lt;label&gt;&lt;input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /&gt;&lt;/label&gt;&lt;label&gt;');
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');


      return true;   
}
</code></pre>

<p>The form code is also below:</p>

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