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

Posted 2023-02-25

【中文标题】如何通过单击“取消”按钮取消文件上传

【英文标题】：How to cancel a file upload by clicking on a 'Cancel' button

【发布时间】：2012-04-14 13:13:48

【问题描述】：

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

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;   
            

【问题讨论】：

How to stop upload in background? 的可能重复项

@kirilloid 不，链接是这个的副本

【参考方案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

【参考方案2】：

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

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

【讨论】：

删除和重新插入文件上传输入元素是防止表单提交先前选择的文件的唯一方法。正确答案。

【参考方案3】：

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

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

【讨论】：

聪明的主意，但上传时页面不会导航。

【参考方案4】：

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

编辑：我很好奇，looked it up。 Abort 是 javascript 中 XMLHttpRequest 函数的一个方法。