jquery 文件上传 - IE 完成回调 data.result 问题 [英] jquery file upload - IE done callback data.result issue

查看:23
本文介绍了jquery 文件上传 - IE 完成回调 data.result 问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 jQuery 文件 上传插件.

I'm using jQuery file upload plugin.

我不使用 UI 部分,只使用基本部分.

I don't use the UI part, only basic one.

当我执行以下操作时,我在 IE 中遇到了问题:

When I do the following, I'm having an issue in IE:

$('input#fileupload').fileupload({
    url: '/upload',
    done: function (e, data) {
    if(data.result != null && $.trim(data.result) != '')
        $('a#attachment').html(data.result);
    }
    //......................

IE 上,data.result 是一个 Object(至少 IE9,不确定其他的...)

on IE the data.result is an Object (IE9 at least, not sure the others...)

Chrome/Firefox 上只是响应 Text(来自服务器的简单纯文本).

On Chrome/Firefox is just the response Text (simple plain text from the server).

想法?

推荐答案

我刚刚遇到了同样的问题,我认为这是因为 IE(甚至 9)不支持 XHR 文件上传.这是我认为正在发生的事情以及我的解决方案:

I just ran into the same problem, and I think it is due to the fact that XHR file uploads are not supported in IE (even 9). Here's what I believe is happening, and my solution:

由于 Safari 5+、Firefox 4+ 和 Chrome 支持 XHR 文件上传,fileupload 插件可以真正异步传输文件,允许来自服务器的纯文本响应.此纯文本响应可通过 done 事件处理程序中的 data.result 获得,并且可以轻松使用.

Since Safari 5+, Firefox 4+, and Chrome support XHR file uploads, the fileupload plugin can transfer the files truly asynchronously, allowing for a pure text response from the server. This pure text response is available via data.result in the done event handler, and can be used easily.

然而,在 IE 中,文件传输通过隐藏 iframe 中的完整页面刷新发生,导致 done 处理程序中的 data.result 成为完整的 document 对象,响应文本被包裹在 <html><body><iframe><pre> 标签中.

In IE, however, the file transfer occurs via a full page refresh in a hidden iframe, causing data.result in the done handler to be a full document object, with the response text wrapped deep inside <html><body><iframe><pre> tags.

这不仅使在 IE 中获取数据变得很痛苦,而且使您获取数据的方式因浏览器而异.

Not only does this make it a pain to get to the data in IE, it makes the way you get to the data different between browsers.

我的解决方案:

我将 forceIframeTransport 选项设置为 true,这使得所有浏览器都可以传输带有隐藏 iframe 的文件,例如 IE.很遗憾错过 XHR 文件上传,但这至少在所有浏览器中为我们提供了相同的响应.然后,在我的 done 处理程序中,我从 document 对象中提取结果,如下所示:

I set the forceIframeTransport option to true, which makes all browsers transfer files with a hidden iframe, like IE. It's unfortunate to miss out on XHR file uploads, but this at least gives us the same kind of response in all browsers. Then, in my done handler, I extracted the result from the document object like so:

var result = $( 'pre', data.result ).text();

就您而言,我认为代码如下所示:

In your case, I think the code would look something like this:

$('input#fileupload').fileupload({
    forceIframeTransport: true,
    url: '/upload',
    done: function ( e, data ) {
     var result = $( 'pre', data.result ).text();
     if( result != null && $.trim( result ) != '' )
        $( 'a#attachment' ).html( result );
    }
...

这里还需要注意的是,来自我的服务器的响应的内容类型是文本/纯文本".您可能已经注意到,IE 有时会提示用户保存或打开 json 响应.

Also important to note here is that the Content Type of the response from my server is 'text/plain'. As you may have noticed, IE sometimes prompts the user to save or open a json response.

以下几个链接在解决问题时被证明是有用的:https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support(参见底部的XMLHttpRequest"部分)https://github.com/blueimp/jQuery-File-Upload/wiki/Options (向下看大约 1/3 处的forceIframeTransport")

Here are a couple links that proved useful when resolving the problem: https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support (see 'XMLHttpRequest' section at bottom) https://github.com/blueimp/jQuery-File-Upload/wiki/Options (see 'forceIframeTransport' about 1/3 of the way down)

希望这会有所帮助!

这篇关于jquery 文件上传 - IE 完成回调 data.result 问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆