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

I did this change at line 10:

and it worked

 if(window.ActiveXObject) {
                var io;


                try
                {
                   //Your JavaScript code will be here, routine JavaScript statements area.
                   io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                }
                catch(err)
                {
                   //JavaScript Errors handling code will be here
                   io=document.createElement("iframe");
                    io.setAttribute("id",frameId);
                    io.setAttribute("name",frameId);
                }