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 $ c $时会立即触发C>。现在
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屋!