How do I serialize file type input in jquery

Question

Previously using Prototype I could serialize the input type file, it gave me the file name of the file being uploaded but when I serialized the form in jquery I just got the input type text and others not the file how do I do it?

Answer 1

Relevant jQuery bug: http://bugs.jquery.com/ticket/2656

I added my own serializeAll method instead of serialize:

    (function($) { 
    $.fn.serializeAll = function() {
        var rselectTextarea = /^(?:select|textarea)/i;
        var rinput = /^(?:color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|search|tel|text|time|url|week)$/i;
        var rCRLF = /\r?\n/g;

        var arr = this.map(function(){
            return this.elements ? jQuery.makeArray( this.elements ) : this;
        })
        .filter(function(){
            return this.name && !this.disabled &&
                ( this.checked || rselectTextarea.test( this.nodeName ) ||
                    rinput.test( this.type ) );
        })
        .map(function( i, elem ){
            var val = jQuery( this ).val();

            return val == null ?
                null :
                jQuery.isArray( val ) ?
                    jQuery.map( val, function( val, i ){
                        return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                    }) :
                    { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
        }).get();

        return $.param(arr);
    }
})(jQuery);

Then call:

$('#form').serializeAll()

Answer 2

As someone else mentioned, you can submit a form containing file inputs via ajax, but it requires some hairy iframe magic. If you don't mind using jQuery, I highly suggest the jquery.forms plugin's ajaxSubmit function.

Answer 3

At the Prototype source (referenced above) serializeElements distinguishes between "element.type != 'file'" and others. Element type "file" is not serialized.

Answer 4

After spending a few minutes in Firebug, there's actually several ways to go about this it seems. For instance, I was able to get a list of files from the fileObject itself:

var file = $("#control").attr("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;

alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

Clearly I can read the values for serializing. But writing is another issue.

But apparently this isn't as easy as others claim. I took the liberty of downloading the Prototype source and couldn't find out where it's instructions were for using FileList data for the File Upload object.

In fact, I found a paper online that cataloged the issues with serializing the File Upload object itself, claiming that no AJAX Library did it well (note, this was written in 2007). This topic is interesting though, and it appears that you may be able to work up any number of methods to pull the data from the File Upload - the spec itself contains ample information to guide you down that path.

I wish I had an answer as to how you can write, and add files to the File List, but at the moment I'm just as lost as you are (or were at the time of asking this question). With a bit more reading, this may prove to be much easier than I suspect - but at the moment I don't have the time to invest.

Best of luck.

Relevant Documentation:

1. FileUpload on W3C
2. Form Serialization by Garrett Smith, 2007
3. Prototype 1.6.1RC3 Source (Line 3967: Form.serializeElements begins)

Answer 5

This is a new feature in FireFox 3.

Check out http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html