jQuery文件上传iframe方法答案

【问题标题】：JQuery file upload iframe methodjQuery文件上传iframe方法
【发布时间】：2014-08-13 12:59:32
【问题描述】：

我想设置一个兼容 IE8 的跨域文件上传解决方案。我一直在使用blueimp's JQuery File Upload plugin with the iframe transport option。

上传效果很好，但我无法从服务器端获取上传结果。用于解析的 result.html 文件的重定向选项似乎是解决方案，但问题是我无法访问托管表单的服务器来部署 HTML 文件。在这种情况下，有没有其他方法可以在不将 HTML 文件部署到源服务器的情况下检索上传结果？

【问题讨论】：

如果您无权访问正在上传文件的服务器，我认为上传完成后没有办法将数据传回给父级。我能想到的唯一方法是从 iframe 进行长民意调查或发布消息。
该文件实际上正在上传到我有权访问的服务器。我无权访问正在呈现文件上传控件的服务器。服务器 A 向服务器 B 请求 JS 文件。该 JS 文件呈现一个文件上传控件，该控件使用 AJAX 将上传的文件发送到服务器 B。我无权访问服务器 A，但我可以完全访问服务器 B。
这意味着您还可以访问呈现这些控件的 JS 文件？如果是这样，是的，我们可以通过 Post Message 来满足您的要求。在我给出实际答案之前让我知道这是真的。
是的，我们可以访问被调用的 JS 文件。但据我了解，PostMessage 仅受 Chrome 支持，对吗？
不正确，PostMessage 是 IE8+ & 基本上所有其他浏览器。 Can I Use Stats.

标签： jquery internet-explorer-8 cross-domain jquery-file-upload

【解决方案1】：

在 javascript 文件中，您可以添加此事件侦听器 (for non-jQuery way see this answer)

$(window).on('message', function(e){
    var data = e.originalEvent.data || e.originalEvent.message;

    data = JSON.parse(data); //only if you did JSON.stringify for the data you sent
    //do what you need with the message you send.
});

上传完成后，您可以将其写入页面或将 iframe 重定向到包含此内容的另一个页面。

window.parent.postMessage('File Upload Done', '*');

如果您需要向父级发送更多数据，您需要先JSON.stringify 内容（旧的 IE 和 FF 不允许对象，只允许字符串。）

window.parent.postMessage(JSON.stringify({'success': true, 'id': 1942}), '*');

【讨论】：

感谢您提供详细信息。由于某种原因，似乎 e.data 和 e.message 都以未定义的形式返回。仍在试图弄清楚为什么会这样。
@emroc 很抱歉，当使用 jQuery 时，您还需要将 originalEvent 添加到数据部分（非 jQuery 方式不需要此）。现在应该可以了。
感谢您的更新。我让您的解决方案正常工作，但我仍然无法完全理解如何将文件上传成功/失败从服务器传回页面。 postmessage 解决方案完全在客户端工作。
@emroc 所以你想做的就是这个。有一个带有 iframe 和 form 的页面。确保表单有target="nameOfIframe"。当用户提交表单时，它会将其发布到 iframe。这意味着 iframe 将转到 form 的 action 字段中的 url。因此，请确保 url 处理正在发布的文件。最后使处理上传的文件末尾有window.parent.postMessage('data', '*');。由于您仍然在与上传相同的文件中，因此您知道上传是否失败并且数据可以是动态的。确保文件具有有效的文档类型和html。