Question

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

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>"); 

现在在将文件上传到服务器等方面，我已经完成了所有工作。但我有一个问题。

我的问题是我不知道如何取消和上传。目前，如果用户点击“取消”按钮，则没有任何反应。我想要发生的是，如果用户点击“取消”按钮，那么它将导航到“stopImageUpload（）”功能，并停止文件上传。但我该怎么做？

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

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

以下是完整代码显示了取消按钮功能被放置和功能，这将启动上传和停止文件的上传：

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

Answer 1

一旦形式已经开始提交我不相信你可以阻止它，而无需导航到新的页面。

如果您将取消按钮重定向到同一页面，但在查询字符串中带有一个标志，您可以使用该标志显示取消通知，以便执行此操作。

Answer 2

jQuery使这种事情更容易。您可以在返回的jQuery对象上调用abort。我想你可以看看jQuery代码，看看它是如何做到的，如果你真的想要推出自己的。

编辑：我很好奇，looked it up。中止是Javascript中XMLHttpRequest函数的一种方法。

Answer 3

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

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