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

问题描述

我有一个包含表单中的文件输入形式，更重要的是取消按钮应该取消文件上传：

 变量$ fileImage = $（＆LT;形式的行动='imageupload.php'方法='后'类='imageuploadform'...＆GT;＆LT;标签＆gt;+图像文件：其中，输入名称='fileImage'类型='文件'类='fileImage/＆GT;＆LT; /标签＆gt;＆LT; BR /＆GT;＆LT;标签＆gt; +＆LT;输入类型=提交名称='submitImageBtn'类='sbtnimage'值='上传'/＆GT;＆LT; /标签＆gt; +＆LT; / P＆GT;＆LT，P类='imagef1_cancel'ALIGN ='中心'＆GT;＆LT;标签＆gt; +＆LT;输入类型=按钮NAME ='cancelImageBtn'类='cancelimage'值=取消/＆GT;＆LT; /标签＆gt; +
＆LT; / P＆GT;＆LT; /形式为GT;）;
 

现在我已经完成了一切，当它来上传文件到服务器和所有。但我有一个问题。

我的问题是，我不知道如何取消和上传。此时如果用户点击取消按钮的一瞬间，然后什么也没有发生。我希望发生的是，如果用户点击取消按钮，然后它会定位到stopImageUpload（）函数，它停止文件上传。但我怎么能做到这一点？

下面是我尝试创建取消按钮功能，但在取消按钮时，没有任何反应。

  $（。cancelimage）。在（点击，函数（事件）{
    的console.log（点击）;
    。事件preventDefault（）;
    stopImageUpload（成功）;
     }）;
 

下面是其中启动上传和停止文件的上传的全部code其中示出了取消按钮功能被放置和功能：

 函数startImageUpload（imageuploadform）{$（imageuploadform）.find（'imagef1_upload_process。'）的CSS（'知名度'，'看得见'）。
sourceImageForm = imageuploadform;                $（。cancelimage）。在（点击，函数（事件）{
                的console.log（点击）;
                。事件preventDefault（）;
                stopImageUpload（成功）;
             }）;                  返回true;
            }            功能stopImageUpload（成功）{                  VAR的结果='';
                  如果（成功== 1）{
结果='＆L​​T;跨度类=味精＆GT;！该文件已成功上载＆LT; / SPAN＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;';
                  }                  其他{
结果='＆L​​T;跨度类=emsg＆GT;有LT文件上传过程中出现错误和;！/ SPAN＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;';
                  }$（sourceImageForm）.find（'imagef1_upload_process。'）的CSS（'知名度'，'隐藏'）。
$（sourceImageForm）.find（'imagef1_upload_form。'）的CSS（'知名度'，'看得见'）。
                  返回true;
            }
 

解决方案

有一个可能的解决方案。你可以做这样的：

  $（＃取消）。点击（函数（）{
  $（＃inputfile中），删除（）。
  $（＃containerof_inputfile）追加（＆LT;输入类型= \\文件\\ID = \\inputfile中\\/＆gt;中）;
}）;
 

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.

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\"/>");
});

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