如何通过单击' Cancel'来取消文件上传按钮 [英] How to cancel a file upload by clicking on a 'Cancel' button

问题描述

我有一个表单，其中包含表单中的文件输入，更重要的是，其中有一个取消按钮，应取消文件的上载:

I have a form which contains a file input within the form and more importantly a cancel button which should cancel a file upload:

var $fileImage = $("<form action='imageupload.php' method='post' class='imageuploadform' ...><label>" + 

"Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label>" +

"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 

"</p><p class='imagef1_cancel' align='center'><label>" +

"<input type='button' name='cancelImageBtn' class='cancelimage' value='Cancel' /></label>" + 
"</p></form>");

现在，我已经完成了将文件上传到服务器的所有工作.但是我有一个问题.

Now I have completed everything when it comes to uploading a file into a server and all that. But I have one problem.

我的问题是我不知道如何取消和上传.目前，如果用户单击取消"按钮，则什么也不会发生.我想发生的是，如果用户单击取消"按钮，则它将导航到"stopImageUpload()"函数，并且它将停止文件上传.但是我该怎么办呢?

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?

下面是我创建取消按钮功能的尝试，但是当单击取消"按钮时，什么也没有发生.

Below is my attempt to create the cancel button function but when the "Cancel" button is clicked, nothing happens.

   $(".cancelimage").on("click", function(event) {
    console.log("clicked");
    event.preventDefault();
    stopImageUpload(success);
     });

下面是完整的代码，显示了取消按钮功能的放置位置以及开始上载和停止文件上载的功能:

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:

          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 = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
                  }

                  else {
result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
                  }

$(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');          
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');


                  return true;   
            }

推荐答案

有一个可能的解决方案.您可以这样:

There is a possible solution. You can do like that:

$("#cancel").click(function(){
  $("#inputfile").remove();
  $("#containerof_inputfile").append("<input type=\"file\" id=\"inputfile\"/>");
});

这篇关于如何通过单击' Cancel'来取消文件上传按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！