在IE8 / 9中使用blueimp文件上传插件的jQuery $ _FILES数组为空

Question

There's lots of questions on StackOverflow related to the Blueimp file upload plugin in IE8/9, but I can't find anything directly related to my problem.

I'm using IE10 in the IE8/9 simulator mode. Every time the PHP $_FILES array is empty. I'm including jquery.iframe-transport.js and it loads fine. There are no JavaScript errors. The $_FILES array is just empty.

I've tried commenting out the dataType: 'json', line which was recommended in another semi-related question, but that did not help.

Not sure what to do here and can't find anything that relates to this. Any help is appreciated.

Here's the JavaScript:

$('#photo-file').fileupload(
    {
        url: 'photos/upload',
        dataType: 'json',
        autoUpload: true,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 8000000 // 8 MB
    }
)
.on(
    'fileuploadadd',
    function (e, data)
    {
        console.log('fileuploadadd');
        if (total_photos_queue < available_photos)
            total_photos_queue++;
        else
            return false;
    }
)
.on(
    'fileuploadsubmit',
    function (e, data)
    {
        console.log('fileuploadsubmit');
        progress_bar.width('0%');
        progress_bar.fadeIn();
    }
)
.on(
    'fileuploadprogressall',
    function (e, data)
    {
        console.log('fileuploadprogressall');
        var progress = parseInt(data.loaded / data.total * 100, 10);
        progress_bar.css('width', progress + '%');
    }
)
.on(
    'fileuploaddone',
    function (e, data) {
        console.log('fileuploaddone');
        $.each(
            data.result.files,
            function (index, file)
            {
                if (file.filename)
                    photo_uploaded(file.id, file.filename, file.subdir);
                else if (file.error)
                    console.log('error: ' + file.error);
            }
        );
    }
)
.on(
    'fileuploadstop',
    function (e) {
        console.log('fileuploadstop');
        progress_bar.fadeOut();
    }
)
.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');

The PHP is simply (for debugging):

var_dump($_FILES); die();

Answer 1

I figured this out, so for anyone having a similar issue here is how I solved it.

In my .on('fileuploadsubmit', function(e, data){ .. }) event I was setting the <input type="file"> to disabled to prevent users from submitting a file while it's already uploading (I removed that bit from the example JavaScript snippet in the original post because I didn't think it mattered). IE8 and IE9 didn't like this. Putting the input disabling code in a setTimeout() with a delay of 100 milliseconds solved it.