iframe 上传浏览器兼容性答案

【问题标题】：iframe upload browser compatibilityiframe 上传浏览器兼容性
【发布时间】：2013-11-14 02:01:32
【问题描述】：

我正在使用 iframe 方法上传 csv 文件。我希望它能让我在正常的表单提交上没有页面的重定向。

HTML：

<section id=fileImport>
    <form id="importForm" target="postiframe" name="Import" enctype="multipart/form-data">
            <input name="import-input" id="importInput" type="file" />
            <button id="importBtn" class="btn btn-large">Import</button>
        </form>
</section>

javascript：

var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');
                this.$("#fileImport").append(iframe);

            var form = $("#importForm");
            form.attr("action", "import/upload");
            form.attr("method", "post");
            form.attr("enctype", "multipart/form-data");
            form.attr("encoding", "multipart/form-data");
            form.attr("target", "postiframe");
            form.submit();

            var self = this;
            this.$("#postiframe").load(function () {
                var iframeContents = $("#postiframe").get(0).contentWindow.document.body.innerHTML;
                self.parseResponse(iframeContents);
            });

enter code here

这是我第一次尝试使用这种 iFrame 方法。我认为在 parseResponse 中我可以只取回 pre 标签中的数据。

例如

<pre>{myData: "blah"}</pre>

我是这样做的：

var re = new RegExp("<pre>(.*?)</pre>");
            var matches = response.match(re);

这适用于 Firefox。然后，当我在 chrome 中尝试它时，chrome 会用类似的东西发回数据

<pre style="width:....">{myData: "blah"}</pre>

我想知道是否有一种方法可以在没有 pre 标记的情况下获取数据，或者有一种方法可以在不同的浏览器中解析它。我还没有在 IE 9 上尝试过，但我只能想象它比 chrome 和 firefox 更难。有什么想法吗？

是否使用这样的 iframe 来上传仍在使用的数据？（我们必须支持 IE 9，所以我不能使用 html 5 的东西）。

【问题讨论】：

标签： javascript jquery iframe

【解决方案1】：

跨域上传？

如果是这样，您需要一个重定向页面来接收来自查询字符串的结果。

如果没有，请不要使用 iframe 上传，http://jquery.malsup.com/form/，这里有一个插件帮助发布表单异步。

【讨论】：