如何通过点击“取消”按钮来取消文件上传

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

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

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

Answer 2

这对于可能在这里结束的人一个答案。 （不完全回答这个问题，因为它已经是太老）

我会回答你如何实现取消上传，或更取消Ajax请求。这可需要大量的应用。

Using axios

您可以取消使用取消令牌的请求。

该爱可信取消令牌API是基于撤回取消承诺的建议。

您可以使用该CancelToken.source工厂取消令牌，如下图所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

并触发取消

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

您也可以通过创建一个传递函数执行的CancelToken构造一个取消令牌：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

Note: you can cancel several requests with the same cancel token.

DOC https://github.com/axios/axios#cancellation

Using XMLHttpRequest:

我们使用中止XHR对象的（）方法。

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
  xhr.abort();
}

DOC https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

Answer 3

一旦表单提交开始我不相信你可以阻止它没有导航到一个新的页面。

如果你让你的取消按钮重定向到同一页面，但是在你可以用它来显示出来，可能做的伎俩取消通知的查询字符串的标志。

Answer 4

jQuery让这种事情更容易。您可以拨打中止返回jQuery对象上。我想你可以看看在jQuery代码，看看它是怎么做的，如果你真的想推出自己的。

编辑：我得到了好奇和looked it up。中止是在JavaScript中的XMLHttpRequest功能的方法。