jQuery File Uploader IE9 Not posting any params on

问题:

I'm using the jQuery file uploader plugin along with rails 3. Plugin here:

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

I'm using the plugin to allow a user to upload a profile photo. The solution so far works with Chrome, Safari and Firefox. However on IE it fails. When you select a file in IE, the plugin posts to the server but there are no params, it's an empty post.

Example post in 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"}

However in IE9, it doesn't send over anything:

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

Here is my implementation:

$('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/*" >

Any ideas why IE would be doing this? Thanks

回答1:

Are you using the basic plugin? I was and I had the same issue and battled with it for a day only to realize I hadn't included the jquery.iframe-transport.js plugin:

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

See documentation here.

Oh! and thanks for your snippet about including the 'authenticity_token' key-value pair as 'formData' - that helped me get rid of the rails 3 warning "WARNING: Can't verify CSRF token authenticity"

回答2:

It is basically about the support of html 5's data tags. IE9 has serious problems with it. For example, when you upload an image, in chrome it sents data:blob and gives you the preview before you upload the image actually. In IE, you can't. Check Gmail's mail attachment screen in IE9 you will see the difference. If it is a large scale project, I advise you to use flash as image uploader.

回答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`
    });

This is tested and working fine in both IE8 and IE9 + above. Please make sure to use the correct dataType:"json" (or datatype:"json") and also make sure your response of web service method is correctly updated to data.result when you debug and check. Thanks