JavaScript：检测上传表格图像是否完成

Question

表单提交完成时是否有任何处理机会（ok或错误）？我想上传图片或多个部分的数据没有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.我有iframe在我的HTML（注意，那里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的响应，responseText的将放在iframe体（如果它与text/plain的类型返回）。然后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文章的启发：在我的情况下服务器OK或其他错误文本回应。我希望这可以帮助有同样问题的人。

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，然后取代成功/失败时，饼干到达），但如果你正在做其他事情，它会很好地工作。