在 iframe 中上传文件后从远程服务器检索响应

Question

我有一个表单，可以将框架中的文件上传到远程服务器。结果在提交 url 服务器返回带有操作结果的 json 数据，我的 iframe 捕获了这些数据。

{'result': 'true' or 'false'}

现在我想检索这个 json 作为 iframe 的回调。我知道我需要 jsonp 来实现这一点，因为它是一个跨站点调用。这是我的函数，带有来自IBM' site 的示例代码：

function fileUploadFunction(){     
    var fileUploadForm = $('#file_upload_form');
    fileUploadForm.attr('action', uploadURL);
    fileUploadForm.submit();
    $('#upload_target').load(function () {
        alert("IFrame loaded");
            $.getJSON(uploadUrl+"&callback=?", function(data) {
                alert("Symbol: " + data.symbol + ", Price: " + data.price);
            });
    });         
};

但是这里很少出现问题。首先 - 我的 uploadUrl 只是 "http://something/" 。我需要它来支持带有$callback= 后缀的呼叫吗？
其次 - 服务器仅作为文件上传的结果给出响应。因此，我需要获取存储在 iframe 中而不是指定 url 中的结果。如何解决？

这是链接。注意表单内隐藏的 iframe。服务器的结果显示在那里。 ：

http://ntt.vipserv.org/artifact/

---

编辑

我之前尝试过：

    $('#upload_target').load(function () {
        var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
        var data = eval("("+ret+")");
    });

但它会引发“权限被拒绝”错误。

Answer 1

这很容易用easyXDM 完成，实际上有一篇关于这个确切用例here 的博客文章。

本质上，它的作用是使用跨域消息传递将响应中继到调用文档。

更新： Here is a link 对此进行操作，源代码可在 github 找到，文件前缀为“upload_”。

Answer 2

Sean 的 easyXDM 建议是一个不错的选择（& 可能应该被标记为正确），但我想建议另一种我没有看到有人使用过的轻量级解决方案。

如果您要发布到另一个域上的隐藏 iframe 并且只需要一个回复（不是双向通信），您可以 使用破坏的 url 将消息从 iframe 传递给父级。这是一个例子：

1. 父级加载不同域的 iframe

2. 父轮询myframe.contentWindow.location.href（由于框架位于另一个域上，因此不断收到Permission denied 错误）

3. iframe 进程，然后重定向到

   http://parentdomain.com/pagethatdoesnotexist?{'result':'ok'}
   

4. iframe 获得 404，但现在该位置可供父级使用

5. 父级从 iframe 的 URL 读取消息

Answer 3

一种可能的解决方案是使用纯 js 设置 iframe 的名称。可以从包装父页面读取此名称。

Answer 4

在我看来，您的代码将请求uploadURL 两次：首先，.submit() 执行 POST 请求以上传文件，结果在 iframe 中显示为网页；其次，.getJSON() 执行 GET 请求，结果在<script> 中作为 javascript 执行。如果您在测试应用时打开 Firebug，您就会意识到这一点。

由于两个请求是独立的，我不知道.getJSON() 将如何为您提供有关您刚刚使用.submit() 上传的文件的任何信息。

对于这类跨域通信，我建议使用postMessage；否则，您将需要更改应用程序工作流程以在文件上传后在 iframe 中执行所有操作；例如在 iframe 中执行 <script>alert('Submission accepted');</script>。

用户成功上传文件后，您想做什么？

Answer 5

根本不要使用 .html()。

我用过

jQuery('.someElement')

它对我有用。您可以将结果保存在变量中并将其插入新元素中

例如

var = jQuery('.someElement');
jQuery('.newElement').html(var);