title: How to cancel a file upload by clicking on a 'Cancel' button
body: <p>I have a form which contains a file input within the form and more importantly a cancel button which should cancel a file upload:</p>
  
  <pre><code>var $fileImage = $("&lt;form action='imageupload.php' method='post' class='imageuploadform' ...&gt;&lt;label&gt;" + 
  
  "Image File: &lt;input name='fileImage' type='file' class='fileImage' /&gt;&lt;/label&gt;&lt;br/&gt;&lt;label&gt;" +
  
  "&lt;input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /&gt;&lt;/label&gt;" + 
  
  "&lt;/p&gt;&lt;p class='imagef1_cancel' align='center'&gt;&lt;label&gt;" +
  
  "&lt;input type='button' name='cancelImageBtn' class='cancelimage' value='Cancel' /&gt;&lt;/label&gt;" + 
  "&lt;/p&gt;&lt;/form&gt;");
  </code></pre>
  
  <p>Now I have completed everything when it comes to uploading a file into a server and all that. But I have one problem.</p>
  
  <p>The problem I have is that I do not know how to cancel and upload. At the moment if the user clicks on the 'Cancel' button, then nothing happens. What I want to happen is that if the user clicks on the "Cancel" button, then it would navigate to the "stopImageUpload()" function and that it stops the file upload. But how can I do this? </p>
  
  <p>Below is my attempt to create the cancel button function but when the "Cancel" button is clicked, nothing happens.</p>
  
  <pre><code>   $(".cancelimage").on("click", function(event) {
      console.log("clicked");
      event.preventDefault();
      stopImageUpload(success);
       });
  </code></pre>
  
  <p>Below is the full code which shows where the cancel button function is placed and the functions which starts the uploading and stops the uploading of the files:</p>
  
  <pre><code>          function startImageUpload(imageuploadform){
  
  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  sourceImageForm = imageuploadform;
  
                  $(".cancelimage").on("click", function(event) {
                  console.log("clicked");
                  event.preventDefault();
                  stopImageUpload(success);
               });
  
                    return true;
              }
  
              function stopImageUpload(success){
  
                    var result = '';
                    if (success == 1){
  result = '&lt;span class="msg"&gt;The file was uploaded successfully!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;';
                    }
  
                    else {
  result = '&lt;span class="emsg"&gt;There was an error during file upload!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;';
                    }
  
  $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');          
  $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');
  
  
                    return true;   
              }
  </code></pre>