jQuery文件上传器在IE9上上传时没有传递任何参数

Question

我正在使用与Rails 3一起的jQuery文件上传插件。 插件链接如下：https://github.com/blueimp/jQuery-File-Upload。

我使用该插件允许用户上传个人资料照片。 到目前为止，该解决方案在Chrome、Safari和Firefox上运行良好。 但是，在IE上失败。 在IE中选择文件后，插件会向服务器发送POST请求，但没有参数，它是一个空POST请求。

例如，Chrome中的POST请求：

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为什么会这样做吗？谢谢。

- AnApprentice

Answer 1

您是否在使用基础插件？我曾经也是，并且遇到了同样的问题，为此我苦战了一天才意识到我没有包含jquery.iframe-transport.js插件：

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

查看此处的文档。

哦！感谢您提供有关将“authenticity_token”键值对作为“formData”包含的片段 - 这帮助我消除了Rails 3警告“警告：无法验证CSRF令牌的真实性”

- Santosh

---

当您调用fileupload时，通常情况下如果您没有看到params被包含在内，那么这种情况就会发生。要么是iframe-transport文件未被包含，要么是被错误地包含了。您可以通过设置forceIframeTransport: true来在所有浏览器中复现此问题。 - concept47

Answer 2

    $("#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。 谢谢

- Bhavin Mistry

Answer 3

这基本上是关于支持 HTML5 数据标签的问题。IE9 在这方面存在严重问题。例如，当你上传图片时，在 Chrome 中它会发送 data:blob 并在上传图片之前给你预览。在 IE 中，则不行。查看 Gmail 在 IE9 上的附件上传界面，你会发现差别。如果是一个大型项目，我建议你使用 Flash 作为图片上传工具。

- user1031030

---

我想说的是数据属性。在上传图片时，检查Google Chrome的“检查元素”。它会得到来自HTML 5本地数据存储的blob：http％3A // blueimp.github.com，您可以看到图像预览。在IE9中进行相同的操作，您将只看到文件名，因为不支持本地数据属性。 - user1031030