按退出键中止 AJAX 文件上传

Posted 2023-02-22

【中文标题】按退出键中止 AJAX 文件上传

【英文标题】：Abort AJAX file upload by pressing escape key

【发布时间】：2013-10-30 18:06:23

【问题描述】：

我正在尝试abort() AJAX 文件上传。我尝试添加事件侦听器，并尝试使用abort() 获取任何keypress，尽管我在控制台中没有看到任何内容。这必须在没有任何框架的情况下完成。

function myFunction()

 var xhr = new XMLHttpRequest();

 xhr.upload.addEventListener('keydown',function(e)
 
  //if (e.keyCode==27) 
  xhr.abort();
  console.log('escape, abort 1?');
 ,false);

 xhr.addEventListener('keydown',function(e)
 
  //if (e.keyCode==27) 
  xhr.abort();
  console.log('escape, abort 2?');
 ,false);

【问题讨论】：

XMLHttpRequest 没有名为 addEventListener 的方法

for (i in new XMLHttpRequest()) console.log('new XMLHttpRequest().'+i);

touché，埋在 MDN 底部。让我再试一次 - XMLHTTpRequest 当前只发出事件 readystatechange - 它不会发出 keydown 或任何其他事件，因此不会触发绑定到这些事件的回调。使用antyrat发布的答案。

您仍在使用这个 ajax 文件上传器吗？您真的像之前所说的那样为付费客户这样做吗？我无法想象付费客户会对已经编写的无数实用程序中存在的功能如此耐心。

【参考方案1】：

尝试将事件附加到 window 对象：

var xhr = new XMLHttpRequest();
// ...
window.addEventListener('keydown',function(e) 
    if (e.keyCode==27) 
        xhr.abort();
    
, false);

【讨论】：

这已经在函数内部了，所以我必须创建一个全局变量，然后用请求数组实现整个系统或将功能移出我的设置无法完成的功能。

为什么是全局变量？这个xhr 将关闭，如果您在xhr 变量准备好之后初始化addEventListener，那么一切都应该工作。

为了使window 事件侦听器工作，xhr 对象还必须是未在函数内部定义的全局变量。

@John - 这是错误的。 javascript 是词法范围的。它不需要是全局的。看看这个小提琴：jsfiddle.net/7BHPY

【参考方案2】：

七年后，我发现了我的旧帖子，并决定自己尝试解决。可以嵌入window 事件监听器；相关代码行位于函数底部，在 Waterfox 和 Chrome 中运行良好。

function ajax_promise(method,url)

 var xhr = new XMLHttpRequest();

 return new Promise(function (resolve, reject)
 
  xhr.onabort = function()
  
   alert('xhr aborted!');
  

  xhr.onreadystatechange = function ()
  
   if (xhr.readyState == 4)
   
    if (xhr.status == 200) resolve(xhr);
    else reject(status: xhr.status, statusText: xhr.statusText);
   
  ;

  window.onkeydown = function(event) if (event.key && event.key == 'Escape') xhr.abort();
  xhr.open(method, url, true);
  xhr.send();
 );