jQuery File Uploader IE9 没有在上传时发布任何参数答案

【问题标题】：jQuery File Uploader IE9 Not posting any params on UploadjQuery File Uploader IE9 没有在上传时发布任何参数
【发布时间】：2012-10-02 22:56:39
【问题描述】：

我正在使用 jQuery 文件上传插件和 rails 3。插件在这里：

https://github.com/blueimp/jQuery-File-Upload

我正在使用插件来允许用户上传个人资料照片。到目前为止，该解决方案适用于 Chrome、Safari 和 Firefox。但是在 IE 上它失败了。当你在IE中选择一个文件时，插件会post到服务器但没有参数，它是一个空post。

chrome 中的示例帖子：

Started PUT "/api/1/settings/ajax_photo_upload" for 10.0.1.3 at 2012-10-02 15:39:20 -0700
Processing by ApiV1::SettingsController#ajax_photo_upload as JS
  Parameters: {"photo"=>#<ActionDispatch::Http::UploadedFile:0x007f9e4bac2e48 @original_filename="xxxxx.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"user[photo]\"; filename=\"xxxxx.jpeg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/var/folders/3x/k1yb0r4s07q1jm82kq93ch180000gn/T/RackMultipart20121002-3633-sxsbtu>>}, "update_type"=>"general"}

但是在 IE9 中，它不会发送任何内容：

Started PUT "/api/1/settings/ajax_photo_upload" for 10.0.1.10 at 2012-10-02 15:39:31 -0700
Processing by ApiV1::SettingsController#ajax_photo_upload as JS

这是我的实现：

$('input[type="file"]').fileupload({
    url : '/api/1/settings/ajax_photo_upload',
    formData : [{
        name : 'authenticity_token',
        value : $('meta[name="csrf-token"]').attr('content')
    }],
    type : 'PUT',
    dataType: 'json',
    add : function (e, data) {
            data.submit();
    }
});

html

<input name="user[photo]" type="file" accept="image/*" >

任何想法为什么 IE 会这样做？谢谢

【问题讨论】：

标签： javascript jquery file-upload blueimp

【解决方案1】：

您使用的是基本插件吗？我曾经遇到过同样的问题并与之斗争了一天才意识到我没有包含 jquery.iframe-transport.js 插件：

<script src="js/jquery.iframe-transport.js"></script>

请参阅文档here。

哦！并感谢您的 sn-p 关于将 'authenticity_token' 键值对包含为 'formData' - 这帮助我摆脱了 rails 3 警告“警告：无法验证 CSRF 令牌真实性”

【讨论】：

当您在调用 fileupload 时没有看到包含的参数时，通常就是这种情况。 iframe-transport 文件未包含或包含不正确。您通常可以通过设置 forceIframeTransport: true 在所有浏览器中重现这一点

【解决方案2】：

基本上是关于html 5的数据标签的支持。 IE9 有严重的问题。例如，当您上传图像时，在 chrome 中它会发送 data:blob 并在您实际上传图像之前为您提供预览。在 IE 中，你不能。在 IE9 中检查 Gmail 的邮件附件屏幕，您会发现不同之处。如果是大型项目，我建议你使用flash作为图片上传器。

【讨论】：

我想说的是数据属性。添加要上传的图像时，请选中 Google Chrome 的“检查元素”。它获取来自 html 5 本地数据存储的 blob:http%3A//blueimp.github.com。您可以看到预览图像。在 IE9 中做同样的事情。您只会看到文件名，因为不支持本地数据属性。

【解决方案3】：

    $("#txt1").fileupload({
        replaceFileInput: false,
        dataType: "json",        
        datatype:"json",
        url: "<%=Page.ResolveUrl("~/WebService/AddAttachment.ashx")%>",
        done: function (e, data) {
            $.each(data.result, function (index, value) {
         //You get the response data in here from your web service
            })
            $("#txt1").val("");
        }`enter code here`
    });

这在 IE8 和 IE9 + 以上都经过测试并且工作正常。请确保使用正确的dataType：“json”（或datatype：“json”），并确保您在调试和检查时将Web服务方法的响应正确更新为data.result。谢谢

【讨论】：