JavaScript：检测上传表单图像完成 [英] JavaScript: detect uploading form image finished

问题描述

表单提交完成后是否有机会处理（确定或错误）？我想上传图片或mulitpart数据没有javascript库。例如，用户点击提交按钮，上传数据服务器响应错误或成功回复。根据结果​​，我需要做点什么。以下是示例表单：

Is there any chance to handle when form submit finished(ok or error)? I want to upload images or mulitpart data without javascript libraries. For example, user clicks submit button, after uploading data server responds with error or success response. Depending on that result I need to do something. Here is example form:

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

推荐答案

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


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

Since I've not access to the server side, I need to solve this problem on the client side. That's why I couldn't use cookies.
I did these steps to achieve success (I used jQuery to create/bind element/events. I didn't use AJAX to send form data):

1. I have iframe in my HTML (pay attention, there is no iframe in HTML):

<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 在服务器响应时被调用一次。

2. I created iframe when submit clicked (I tried to avoid unnecessary onload event firing). Notice, after adding iframe to body, I added attribute onload. Because if I add onload attribute while creating iframe, it instantly fired when I append iframe to body. Now closePopup is called once when server responded.

$('#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 body 即可。然后 iframe 的 onload 事件触发（当然我们的 closePopup 函数）。在我的情况下，服务器以确定或其他错误文本回复：

3. When server responds with responseText (if it returns with text/plain type), responseText will be put in iframe body. Then iframe's onload event fires (of course our closePopup function). In my case server responded with OK or other error text:

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

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


左右：它适用于IE8

I'm really inspired by this article. I hope this helps someone who has the same problem.

PS: It worked on IE8

这篇关于JavaScript：检测上传表单图像完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！