jQuery AJAX Fileupload crossbrowser support

Question

I'm currently working on an AJAX file upload script, which works like a charm in Firefox but doesn't work in IE.

this is the basic HTML I'm using:

<form >
    <input type="file" name="FileFields" id="FileFields"/>
    <button type="button" onclick="uploadFile();" id="uploadButton">Upload</button>
    <ul id="files"/>
    ... other form elements ...
</form>

<div id="fileUploadDiv"/>

this is the uploadFile function:

function uploadFile()
{
    //we don't want more then 5 files uploaded
    if($('#files li').size() >= 5)
    {
        return;
    }
    //disable the upload button
    $('#uploadButton').attr('disabled','disabled');
    //show loading animation
    $('#files').append(
        $('<li>')
            .attr('id','loading')
            .append(
                $('<img>').attr('src','/images/loading.gif')
            )
            .addClass('loading')
    );

    //add all neccessary elements (the form and the iframe)
    $('#fileUploadDiv').append(
        $('<form action="/uploadFile" method="post" id="fileUploadForm">')
            .attr('enctype','multipart/form-data')
            .attr('encoding', 'multipart/form-data')
            .attr('target', 'upload_frame')
            .append(
                $('#FileFields').clone()
                    .css('visibility','hidden')
        )
        .append(
            $('<iframe>').attr('name','upload_frame')
                .load(function(){finishedPostingFile();})
                .attr('id','upload_frame')
                .attr('src','')
                .css({
                    'width':'0px',
                    'height':'0px',
                    'border':'0px none #fff'
                })

        )
    );


    //start uploading the file
    $('#fileUploadForm').submit();
}

and finishedPostingFile() would be the call back function once the iframe has finished posting/loading.

Now, this works like a charm in Firefox but doesn't work in IE. I already figured out that IE needs attr('encoding',...) instead of attr('enctype',...) and I also tried it without creating the form and iframe on the fly by writing those elements as plain html, which didn't really make a difference.

IE (IE8, to be concrete, haven't tested it in < 8) doesn't give an error and the loading animation just keeps on spinning, without the file ever being uploaded... Anyone got any idea on how to make this work?

Answer 1

Why not use this, http://valums.com/ajax-upload/ ?

Or at least look at their code to see the right way for creating a Form that will work cross-browser.

Answer 2

here is a working example for Firefox/IE7/IE8, i am currently using a jqueryUI dialog for the progressbar.

just replace "DocumentUploadForm" with the Id of your form

$(document).ready(function() {
    $("#DocumentUploadForm").submit(function(data) {
        data.preventDefault;

        var submittingForm = $("#DocumentUploadForm");
        var frameName = ("Upload");
        var uploadFrame = $("<iframe name=\"" + frameName + "\" />");

        uploadFrame.css("display", "none");


        $(".document_upload_progress").dialog({
            autoOpen: true,
            bgiframe: true,
            resizable: false,
            height: 150,
            width: 350,
            modal: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            },
            open: function() {
                $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();
            },
            close: function() {
                $(".document_upload_progress").dialog("destroy");
            }
        });


        uploadFrame.load(function(data) {
            //submit complete
            setTimeout(function() { uploadFrame.remove(); }, 100);
            $('#document_upload_dialog').dialog('close');
        });

        $("body:first").append(uploadFrame);

        //setup complete
        submittingForm.attr("target", frameName);
    });
});

hth

Answer 3

I guess your frame is never getting appended to DOM in IE. Atleast if the HTML you posted is complete. As it doesn't contain any div with id=fileUploadDiv

You can confirm this by adding the iframe with non-zero width and height and set the src to a correct URL.