Javascript 如何通过单击'；取消'；按钮

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

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

以下是显示“取消”按钮功能所在位置的完整代码，以及开始上载和停止上载文件的功能：

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

函数startImageUpload（imageuploadform）{
$（imageuploadform）.find（'.imagef1_upload_process'）.css（'visibility'，'visible'）；
sourceImageForm=imageuploadform；
$（“.cancelimage”）。在（“单击”上，函数（事件）{
控制台日志（“单击”）；
event.preventDefault（）；
stopImageUpload（成功）；
});
返回true；
}
函数stopImageUpload（成功）{
var结果=“”；
如果（成功==1）{
结果='文件已成功上载！

'；
}
否则{
结果='上传文件时出错！

'；
}
$（sourceImageForm）.find（'.imagef1_upload_process'）.css（'visibility'，'hidden'）；
$（sourceImageForm）.find（'.imagef1_upload_form'）.css（'visibility'，'visible'）；
返回true；
}

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

---

如果您使取消按钮重定向到同一页面，但查询字符串中有一个标志，您可以使用该标志显示取消通知，这可能会起作用。

jQuery使这类操作更容易。可以对返回的jQuery对象调用abort。我想，如果您真的想使用jQuery代码，您可以查看jQuery代码，看看它是如何实现的

---

编辑：我变得好奇和好奇。Abort是Javascript中XMLHttpRequest函数的一种方法。

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

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

$（“#取消”）。单击（函数（）{
$（“#inputfile”）.remove（）；
$（“#containerof_inputfile”）。追加（“”）；
});

这是对可能在这里借钱的人的回答。（问题已经太老了，没有完全回答）

我将回答您如何实现取消上传或更多取消ajax请求。这在很多应用中都是需要的

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

axios cancel token 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构造函数来创建cancel令牌：

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.

文档

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

---

doc

可能重复@kirilloid no，该链接是这个聪明想法的重复，但页面在上载时不会导航到别处。删除并重新插入文件上载输入元素是防止表单提交以前选择的文件的唯一方法。回答正确。

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