取消文件上传不能很好地在Internet Explorer中工作 - cancel file upload not working very well in Internet Explorer

ie浏览器在取消文件上传时出现问题，但在其他浏览器中，取消文件不会出现任何问题。

现在在其他浏览器中，如果我上传一个文件，然后在上传过程中我点击"取消"按钮，它会停止文件上传到服务器，显示取消消息，就是这样，没有其他事情发生，这很好。

但是在ie浏览器中，如果我上传了一个文件，然后在上传过程中我点击了"取消"按钮，它会显示取消消息，但它仍然在后台上传文件，这意味着文件将被上传到服务器中，然后它会显示文件成功加载消息，取代取消消息。

我的问题是，在我的代码是什么导致问题在ie浏览器，它继续文件上传，即使我已经取消了上传。有人知道怎么解决这个问题吗?

下面是一个表单，其中包含文件输入以及上传和取消按钮;

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
 Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>
 <input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
 <input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>
 <iframe class='upload_target_image' name='upload_target_image' src='#' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>

下面是开始上传文件的函数，其中包含取消函数:

 function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  sourceImageForm = imageuploadform;
        $(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow
              $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'");
               jQuery.ajax("cancelimage.php").done(function(data) {
        return stopImageUpload(2);
    });  
}); 
      return true;
}

上传完成后显示相关消息的代码如下:

      var imagecounter = 0;
function stopImageUpload(success, imagefilename){
      var result = '';
      imagecounter++;
      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';      
      }
      else if (success == 2){
          result = '<span class="imagemsg'+imagecounter+'"> The file upload was cancelled</span>';
      }
      else {
         result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span>';
      }

      $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
      $(sourceImageForm).find('.imagemsg').html(result);
      $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

      return true;   
}

下面是imageuload .php页面，它上传文件:

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

session_start();

if ($_FILES['fileImage']['error'] === UPLOAD_ERR_OK) {
    $result = 0;

    if (getimagesize($_FILES['fileImage']['tmp_name'])) {
        if ((($_FILES["fileImage"]["type"] == "image/gif") || ($_FILES["fileImage"]["type"] == "image/jpeg") || ($_FILES["fileImage"]["type"] == "image/pjpeg") || ($_FILES["fileImage"]["type"] == "image/jpg")) && ($_FILES['fileImage']['size'] > 0)) {
            if (is_file("ImageFiles/" . $_FILES['fileImage']['name'])) {
                $parts = explode(".", $_FILES['fileImage']['name']);
                $ext   = array_pop($parts);
                $base  = implode(".", $parts);
                $n     = 2;
                while (is_file("ImageFiles/" . $base . "_" . $n . "." . $ext))
                    $n++;
                $_FILES['fileImage']['name'] = $base . "_" . $n . "." . $ext;
                move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
                $result = 1;

            }
            else {
                move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
                $result = 1;
            }
        }
    }
} else {
    echo "Upload was not successful";
}
?> 
  <script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php
echo $result;
?>, '<?php
echo $_FILES['fileImage']['name'];
?>');</script> 

</body> 
</html>

更新:

下面的内容是否正确?

//startImageUpload
    function startImageUpload(imageuploadform){
      $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
      sourceImageForm = imageuploadform;
            $(imageuploadform).find(".imageCancel").on("click", function(event) {
        $('.upload_target_image').get(0).contentwindow
        $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'");
         $request = $.ajax("cancelimage.php").done(function(data) {
            return stopImageUpload(2);
        });  
    }); 
          return true;
    }
//imageClickHandler
 function imageClickHandler(imageuploadform){ 
      if(imageValidation(imageuploadform)){ 
          window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
          return startImageUpload(imageuploadform); 
          $request.abort()
      } 
      return false;
  }

似乎我错误地认为您正在使用ajax上传图像。现在我看到了完整的代码，我意识到您只是允许表单提交，ajax只是与接收取消的php通信。这意味着您不能使用ajax abort来取消上传。您可以做的是将iframe内容替换为cancelimage.php。我没有测试过这个

//startImageUpload
function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  sourceImageForm = imageuploadform; // not sure what this does
  $(imageuploadform).find(".imageCancel").on("click", function(event) {
    $('.upload_target_image').get(0).contentwindow; // not sure what this is doing....
    $("iframe[name='upload_target_image']").on("load",function() {
      stopImageUpload(2);
    }).attr("src", "cancelimage.php")
  }); 
  return true;
}
//imageClickHandler
function imageClickHandler(imageuploadform){ 
  if(imageValidation(imageuploadform)){ 
      window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
      return startImageUpload(imageuploadform); 
  } 
  return false;
}