jQuery AJAX Fileupload crossbrowser support

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 wor开发者_开发百科k 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?

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.

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);
                }

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

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.

Thanks to everybody.

I now use the script from http://www.uploadify.com.

Great script with a lot of customizable functions...

I am doing a very similar thing, I had the problem that just IE8 did not upload the files to my server; got a IniSizeError.

My solution was adding this line:

form.encoding = "multipart/form-data";

to my form when created. Enctype attribute is also required.