上传文件后如何从XMLHttpRequest响应中正确识别状态文本？

我明白你遇到的问题了——你试图用jQuery的DOM查找方法去定位响应文本里的状态信息，但这完全用错了工具！让我帮你分析问题并解决它。

问题根源 #

你当前代码里的$(response).find($('[Failed'))和$(response).find($('[NO ERROR]'))存在两个关键错误：

• 这不是有效的jQuery选择器：[Failed]这种写法不符合CSS选择器规则，jQuery会把它当成属性选择器，但你要找的是文本内容，不是DOM元素的属性。
• jQuery的find()方法是用来查找DOM树中的子元素的，而你的目标状态文本是在HTML注释（<!-- UPGRADE_STATUS: [Failed to unpack image] -->）里，属于字符串的一部分，根本不是DOM元素，所以这种方法完全行不通。而且不管匹配不匹配，$(...).find(...)都会返回一个jQuery对象，在if判断里永远是true，这就是为什么两个弹窗都会触发的原因。

正确的解决方案 #

既然响应是纯文本（你已经设置了xhr.responseType = 'text'），我们直接对字符串进行匹配就可以了。可以用JavaScript原生的includes()方法（更直观）或者indexOf()方法：

修改后的核心代码片段 #

xhr.onload = function () {
  var response = this.responseText;
  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
    // 检查响应文本中是否包含失败标识
    if (response.includes('[Failed')) {
      $('.modal-title').css('color', 'red');
      $('#myModalFailed').modal('show');
    } 
    // 检查是否包含成功标识
    else if (response.includes('[NO ERROR]')) {
      $('.modal-title').css('color', 'green');
      $('#myModalSuccess').modal('show');
    }
  }
};

补充说明 #

• 用else if而不是两个独立的if，可以避免在极端情况下（比如响应同时包含两个关键词）两个弹窗都被触发的问题。
• 如果你的环境需要兼容非常老的浏览器（不支持includes()），可以改用indexOf()：

  // 替换includes的写法
  if (response.indexOf('[Failed') !== -1) {
    // 失败逻辑
  } else if (response.indexOf('[NO ERROR]') !== -1) {
    // 成功逻辑
  }
  

• 如果你想更精准地提取UPGRADE_STATUS:后面的状态内容，可以用正则表达式，匹配更准确：

  const statusMatch = response.match(/UPGRADE_STATUS: \[(.*?)\]/);
  if (statusMatch) {
    const statusText = statusMatch[1];
    if (statusText.startsWith('Failed')) {
      $('.modal-title').css('color', 'red');
      $('#myModalFailed').modal('show');
    } else if (statusText === 'NO ERROR') {
      $('.modal-title').css('color', 'green');
      $('#myModalSuccess').modal('show');
    }
  }
  

内容的提问来源于stack exchange，提问作者Evgeny