CODEWITHSUNDEEP
phpjqueryhtml
user1830984
user1830984

Reputation: 859

cancel file upload not working very well in Internet Explorer

Internet Explorer is causing a problem for me when it comes to cancelling a file upload but in all other browsers it is not causing any probelms when it comes to cancelling files.

Now in the other browsers, if I upload a file and then during uploading I click on the "Cancel" button, it will stop the file uploading into the server, dislay the cancel message and that is it, nothing else happens which is great.

But in interent explorer, if I upload a file and then during uploading I click on the "Cancel" button, it dislays the cancel message but then it is still uploading the file in the background, meaning the file will gt uploaded into the server and then it will dispplay the file is successfully load message, replacing the cancel message.

My question is that what in my code is causing the problem in internet explorer that it continues file uploading even though I hav cancelled the uplaod. Does anyone knows how to fix this?

Below is a form where it contains a file input as well as and upload and cancel button;

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

Below is the function for the starting of the uploading of the file where it contains the cancel function inside:

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

Below is the code where after the upload is finished it displays the relevant messages:

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

Below is the imageupload.php page where it uploads the files:

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

UPDATE:

Is below correct in what you are stating:

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

Upvotes: 0

Views: 943

Answers (1)

mplungjan
mplungjan

Reputation: 178109

It seems I assumed wrongly that you were using ajax to upload the image. Now I see the complete code I realise you are simply allowing the form to submit and the ajax is only to communicate with the php that receives the cancel. That means that you cannot use ajax abort to cancel the upload. What you can do instead is to replace the iframe contents with the cancelimage.php. I have not tested this 

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

Upvotes: 1

Related Questions