JavaScript：检测已完成的表单图像上载

表单提交完成时是否有机会处理（确定或错误）？我想上传没有javascript库的图像或多部分数据。例如，用户在上传数据后单击

submit

按钮，服务器以

error

或

success

响应进行响应。根据结果，我需要做点什么。以下是示例表格：

<form method="post" enctype="multipart/form-data" action="/upload_file">
    <input type="file" name="upload_image" />
    <input type="submit" value="Submit" />
</form>

---

一个非ajax选项是在页面上有一个带有名称的隐藏的

iframe

，并将表单的

target

操作设置为该

iframe

的名称。让服务器响应特定于表单的cookie（您甚至可以传入服务器应使用的

id

作为cookie名称），然后在表单上提交开始轮询以查看该cookie是否存在。当cookie到达时，表示服务器已经回复了

iframe

中的表单post。您可以将成功/失败信息放在cookie本身中，也可以将其放在最后出现在

iframe

中的文档中，并让客户端代码从中删除它。然后采取适当的行动

例如，在伪代码中：

On The Client On The Server --------------------------- --------------------------- 1. JS assigns ID to form 2. User submits form 3. JS handles submit event, starts polling for the cookie with the relevant ID 4. Receives and processes the form 5. Responds with success/failure and cookie 6. JS polling sees cookie, reads success/fail from cookie or document in iframe 7. JS does something appropriate with success/fail info 在服务器上的客户端上 --------------------------- --------------------------- 1.JS将ID分配给表单 2.用户提交表单 3.JS处理提交事件， 开始对 cookie与相关的 身份证件 4.接收并处理表单 5.以成功/失败和 曲奇 6.我看到了cookie， 从中读取成功/失败 中的cookie或文档 iframe 7.JS做了一些适当的事情 带有成功/失败信息

---

我第一次想到这项技术，立即在一个项目中使用，效果很好。在这个问题中，我们处理的是返回一个要下载的文档（

内容处置：附件

）（我用它来显示一个“构建您的文档”

div

，然后在cookie到达时用success/failure替换它），但是，如果您正在做其他事情，它会非常好地工作。

一个非ajax选项是在页面上有一个带有名称的隐藏的

iframe

，并将表单的

target

操作设置为该

iframe

的名称。让服务器响应特定于表单的cookie（您甚至可以传入服务器应使用的

id

作为cookie名称），然后在表单上提交开始轮询以查看该cookie是否存在。当cookie到达时，表示服务器已经回复了

iframe

中的表单post。您可以将成功/失败信息放在cookie本身中，也可以将其放在最后出现在

iframe

中的文档中，并让客户端代码从中删除它。然后采取适当的行动

例如，在伪代码中：

On The Client On The Server --------------------------- --------------------------- 1. JS assigns ID to form 2. User submits form 3. JS handles submit event, starts polling for the cookie with the relevant ID 4. Receives and processes the form 5. Responds with success/failure and cookie 6. JS polling sees cookie, reads success/fail from cookie or document in iframe 7. JS does something appropriate with success/fail info 在服务器上的客户端上 --------------------------- --------------------------- 1.JS将ID分配给表单 2.用户提交表单 3.JS处理提交事件， 开始对 cookie与相关的 身份证件 4.接收并处理表单 5.以成功/失败和 曲奇 6.我看到了cookie， 从中读取成功/失败 中的cookie或文档 iframe 7.JS做了一些适当的事情 带有成功/失败信息

---

我第一次想到这项技术，立即在一个项目中使用，效果很好。在这个问题中，我们处理的是返回一个要下载的文档（

内容处置：附件

）（我用它来显示一个“构建您的文档”

div

，然后在cookie到达时用success/failure替换它），但是如果您在做其他事情，它会非常好地工作。

因为我无法访问服务器端，所以需要在客户端解决这个问题。这就是为什么我不能用饼干
我完成了这些步骤以获得成功（我使用jQuery创建/绑定元素/事件。我没有使用AJAX发送表单数据）：

1.我的HTML中有iframe（注意，HTML中没有

iframe

）：

3.当服务器用responseText响应时（如果返回文本/普通类型），responseText将被放入

iframe

正文中。然后

iframe

的onload事件触发（当然是我们的closePopup函数）。在我的情况下，服务器以OK或其他错误文本响应：

// Generated by CoffeeScript
window.closePopup = function() {
    var error, response, _ref, _ref1;
    setTimeout(function() {
      return $('#multipart_uploader_iframe').remove();
    }, 500);
    try {
      response = (_ref = (_ref1 = frames['multipart_uploader_iframe']) != null ? 
        _ref1.document.getElementsByTagName("body")[0].innerHTML : void 0) != null ? _ref : "";
      if (response.indexOf("OK") !== -1) {
        // close here your popup or do something after successful response
        alert('Message has been sent successfully.');
        return $(".popup").dialog('close'); 
      }
    } catch (_error) {
      error = _error;
      throw new Error(error);
    }
    return alert("Error occurred while sending message.");
};

这篇文章让我深受启发。我希望这能帮助有同样问题的人。

---

PS：它在IE8上工作

因为我无法访问服务器端，所以我需要在客户端解决这个问题。这就是为什么我不能用饼干
我完成了这些步骤以获得成功（我使用jQuery创建/绑定元素/事件。我没有使用AJAX发送表单数据）：

1.我的HTML中有iframe（注意，HTML中没有

iframe

）：

3.当服务器用responseText响应时（如果返回文本/普通类型），responseText将被放入

iframe

正文中。然后

iframe

的onload事件触发（当然是我们的closePopup函数）。在我的情况下，服务器以OK或其他错误文本响应：

// Generated by CoffeeScript
window.closePopup = function() {
    var error, response, _ref, _ref1;
    setTimeout(function() {
      return $('#multipart_uploader_iframe').remove();
    }, 500);
    try {
      response = (_ref = (_ref1 = frames['multipart_uploader_iframe']) != null ? 
        _ref1.document.getElementsByTagName("body")[0].innerHTML : void 0) != null ? _ref : "";
      if (response.indexOf("OK") !== -1) {
        // close here your popup or do something after successful response
        alert('Message has been sent successfully.');
        return $(".popup").dialog('close'); 
      }
    } catch (_error) {
      error = _error;
      throw new Error(error);
    }
    return alert("Error occurred while sending message.");
};

这篇文章让我深受启发。我希望这能帮助有同样问题的人。

---

PS：它在IE8上工作

除非您使用AJAX，否则提交表单会刷新页面，因此您无法检测到它。如果您提交表单，将加载新页面。因此，所有的JS都停止存在。只有在不设置

target的情况下，上述情况才是正确的<