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

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

- user1333290

---

可能是如何停止后台上传？的重复问题。 - kirilloid

@kirilloid 不是，这个链接是重复的。 - ajax333221

Answer 1

这是为可能会借此处阅读的人提供的答案（由于问题已经太旧，不完全回答该问题）。

我将回答如何实现取消上传或更多取消ajax请求。 这在许多应用程序中可能需要。

使用axios

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

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.

文档：https://github.com/axios/axios#cancellation

使用XMLHttpRequest：

我们使用xhr对象的abort()方法。

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

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

该文档介绍了XMLHttpRequest对象的abort()方法，用于在XMLHttpRequest请求还未完成时中止请求。

- Mohamed Allal

Answer 2

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

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

- Chinbold Gansukh

---

移除并重新插入文件上传输入元素是防止提交先前选择的文件的唯一方法。正确答案。 - Markus Bucher

Answer 3

一旦表单开始提交，我认为您无法在不导航到新页面的情况下停止它。

如果你让取消按钮重定向到相同的页面，但在查询字符串中加入一个标志，你可以用它来显示一个取消通知，这可能会奏效。

- user1243584

---

聪明的想法，但上传时页面不会导航离开。 - Aust

Answer 4

jQuery可以让这种事情变得更容易。您可以在返回的jQuery对象上调用abort方法。如果您真的想自己编写代码，我想您可以查看jQuery代码来了解它是如何实现的。

编辑：我很好奇，查找了一下。在JavaScript中，Abort是XMLHttpRequest函数的一个方法。

- stark

Answer 5

至少在Node中，你可以使用AbortController API来终止脚本发起的调用。

这些调用还可能是带有文件上传有效负载的调用。

const controller = new AbortController();
const signal = controller.signal;

const fetchSite = async () => {
  try {
    const response = await fetch('https://google.com/', { signal });
    const source = await response.json();
    console.log(todo);
  } catch (error) {
    if (error.name === "AbortError") {
      console.log("Operation aborted");
    } else {
      console.error(err);
    }
  }
};

fetchSite();

controller.abort();

更多信息请参见：https://blog.logrocket.com/complete-guide-abortcontroller-node-js/

- lofihelsinki