Question

表单提交完成后是否有机会处理（确定或错误）？我想上传图片或mulitpart数据没有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>

Answer 1

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

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

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

2.我在点击提交时创建iframe（我试图避免不必要的onload事件触发）。请注意，将iframe添加到正文后，我添加了属性onload。因为如果我在创建iframe时添加 onload 属性，那么当我将iframe追加到body时会立即触发。现在closePopup在服务器响应时被调用一次。

$('#send_message_form').submit(function() {
    var customIframe = $('<iframe></iframe>');
    customIframe.attr({
      'id': "multipart_uploader_iframe",
      'name': "multipart_uploader_iframe"
    });

    $('body').append(customIframe);
    customIframe.attr({
      'onload': "closePopup();"
    });
    return true;
});

3.当服务器使用 responseText 进行响应时（如果它以 text / plain 类型返回）， responseText 将被放入iframe <强>体即可。然后iframe的 onload 事件触发（当然我们的 closePopup 函数）。在我的情况下，服务器以确定或其他错误文本回复：

// 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.");
};

我真的受到this文章的启发。我希望这可以帮助那些有同样问题的人。

PS：它适用于IE8

Answer 2

一个非ajax选项是在页面上隐藏iframe并使用名称，并将表单的target操作设置为iframe的名称。让服务器使用特定于表单的cookie进行响应（您甚至可以传入服务器应该用作cookie名称的id），然后在表单提交开始轮询以查看该cookie是否存在。当cookie到达时，表示服务器已回复iframe中的表单帖子。您可以将成功/失败信息放在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

我首先提出了这种技术to answer this other question here，立即在项目中使用它，它起作用了。对于那个问题，我们正在处理一些会返回要下载的文档的内容（Content-Disposition: attachment）（我用它来显示“构建您的文档”div，然后用成功/替换它当cookie到达时失败了，但是如果你正在做其他的事情，它会很好地运作。

JavaScript：检测上传表单图像完成

2 个答案: