Hey all

can someone recommend to me a really simple
jquery file upload plugin or script.

I simply want to upload a file from local and save it to my server.

Cheers

Steve

What could be simpler than a form with a input type="file" and submit button?

err if you read the question i asked for script to do file upload with jquery.

Yes I read that, but as javascript CANNOT actually upload files to a server, you end up messing about with javascript just to do exactly the same thing as a file input and a submit button does, what is the point of adding a layer of complexity for zero gain?

Yep. You'd need to use a form with <input type="file" />. If you were going for something more pretty, however, like the ones with the progress bar, you could look at this for a simple way to do it.

If you're just looking for simplicity, I'd recommend this script, that I used myself for my site. Unfortunately I could not find the link to where I got it, so I'll paste the entire file (which isn't very big anyway ) including credits. Although you could most likely find the source through google.

Like many "AJAX upload scripts" this one simply adds an invisible iframe to where it redirects the submitted form (which contains some file input field(s)), and then grabs the output in the frame as the response. But unlike many other such scripts, it does only that and nothing more. So if you i.e. want json formatted result you have to parse it yourself (as in my example below).

Heres the script jquery.iframe-post-form.min.js

/**
 * jQuery plugin for posting form including file inputs.
 * Copyright (c) 2010 Ewen Elder
 *
 * Licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * @author: Ewen Elder <glomainn at yahoo dot co dot uk> <ewen at jainaewen dot com>
 * @version: 1.0.1 (2010-22-02)
**/
(function($){$.fn.iframePostForm=function(o){var J,a,i,n;a=$(this);o=$.extend({},$.fn.iframePostForm.defaults,o);if(!$('#'+o.iframeID).length){$('body').append('<iframe name="'+o.iframeID+'" id="'+o.iframeID+'" style="display:none"></iframe>')}return a.each(function(){i=$(this);i.attr('target',o.iframeID);i.submit(function(){o.post.apply(this);n=$('#'+o.iframeID);n.one('load',function(){J=n.contents().find('body');o.complete.apply(this,[J.html()]);setTimeout(function(){J.html('')},1)})})})};$.fn.iframePostForm.defaults={iframeID:'iframe-post-form',post:function(){},complete:function(response){}}})(jQuery);

And here's an example usage

$(document).ready(function(){
    $('#upload_form').iframePostForm({
        post : function() {
            // run when form is submitted
        },
        complete : function (response) {
            // run when request is completed
            try {
                json = $.parseJSON(response);
                // do something smart
            } catch (e) {
                // generate some error
            }
        }
    });
});