简体   繁体   English

删除iframe会阻止文件上传吗?

[英]Will removing a iframe stop a file from uploading?

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. 似乎最常见的实现方法是在用户点击“取消”按钮时删除iframe。

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. 如果用户确实单击了“取消”按钮,那么我仍然希望用户以后可以上传其他文件,如果他们愿意,我希望在删除iframe时它不会是永久性的。

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? 如果这是最好的方法,那么有人知道如何在单击“取消”按钮时删除iframe吗?

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   

if you have a button 如果你有一个按钮

HTML HTML

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

and a JavaScript 和一个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 并且用户单击该按钮,iframe的src属性将重置为不创建混合内容警告的变体

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM