Does anyone have a good example / tutorial on how to use jQuery Form Upload?

Question

After testing AjaxFileUpload Plugin I discovered that it does not let me retrieve $_POST data, as the plugin only submits $_FILE data. Therefore I turn to jQuery Form Plugin which is documented here: http://www.malsup.com/jquery/form/#file-upload

Unfortunately, I feel the example is poor and doesn't really help me. I need to use IFrame in order to prevent the page to reload.

Does anyone have some working code og link to god tutorials using jQuery Form plugin for uploading files using IFrame?

I know there are other file upload plugins, but I would like to use this one for this project.

UPDATE
This is the code I currently use. All it does is relaod the page and I get no output / alerts.

HTML

<form id="uploadForm" enctype="multipart/form-data" action=""  method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    <input type="hidden" id="current_path" name="current_path" value="<?php echo $fb->relative_url; ?>" />
    <input id="uploadFile" name="uploadFile" type="file" />
    <input type="submit" class="button uploadImage" value="<?php _e('Upload File') ?>" /> <br /> 
</form>

Javascript

var options = {
    beforeSubmit:   function() { alert('before');},
    success:        function(html) { alert('success + ' + html);},
    data:           {current_path: jQuery('#currentPath span').html()},
    url:            '../wp-content/plugins/wp-filebrowser/uploader.php',
    iframe:         true,
    dataType:       'html'
};

jQuery('#uploadForm').submit(function() {
    jQuery(this).ajaxSubmit(options);
    return false;
});

I also tried this JS

jQuery('#uploadForm').ajaxForm({
    beforeSubmit:   function() { alert('before');},
    success:        function(html) { alert('success + ' + html);},
    data:           {current_path: jQuery('#currentPath span').html()},
    url:            '../wp-content/plugins/wp-filebrowser/uploader.php',
    dataType:       'html'
});

But still my page only reloads and no alerts are fired :(

DEBUG

Running the following script in my JS file: alert(jQuery('#uploadForm').ajaxForm); gave me this output:

function (options) {
    if (this.length === 0) {
        var o = {s: this.selector, c: this.context};
        if (!jQuery.isReady && o.s) {
            log("DOM not ready, queuing ajaxForm");
            jQuery(function () {jQuery(o.s, o.c).ajaxForm(options);});
            return this;
        }
        log("terminating; zero elements found by selector" + (jQuery.isReady ? "" : " (DOM not ready)"));
        return this;
    }
    return this.ajaxFormUnbind().bind("submit.form-plugin", function (e) {if (!e.isDefaultPrevented()) {e.preventDefault();
jQuery(this).ajaxSubmit(options);}}).bind("click.form-plugin", function (e) {var target = e.target;
var jQueryel = jQuery(target);
if (!jQueryel.is(":submit,input:image")) {var t = jQueryel.closest(":submit");
if (t.length == 0) {return;}target = t[0];}var form = this;
form.clk = target;
if (target.type == "image") {if (e.offsetX != undefined) {form.clk_x = e.offsetX;
form.clk_y = e.offsetY;} else if (typeof jQuery.fn.offset == "function") {var offset = jQueryel.offset();
form.clk_x = e.pageX - offset.left;
form.clk_y = e.pageY - offset.top;} else {form.clk_x = e.pageX - target.offsetLeft;form.clk_y = e.pageY - target.offsetTop;}}setTimeout(function () {form.clk = form.clk_x = form.clk_y = null;}, 100);});
}

From the debugging, it looks like the form is not finished loading when I run this script. That's weird, because I have it inside jQuery(document).ready().

Answer 1

It would help if you could be more specific about what you need to do. I've used the plug-in before though so can show a simple example.

You don't need an IFrame to prevent a page reload. I agree the documentation is pretty poor, I didn't really understand the IFrame bit but found it worked fine for me without one.

<% using (Html.BeginForm("UploadDocument", "Documents", 
               new { wo = ViewContext.RouteData.Values["id"] },
               FormMethod.Post, 
               new { enctype = "multipart/form-data", @class="attachDocumentsForm" }))
        {%>
            <input type="file" name="fileInput" class="attachDocumentFileInput" size="100"/>
            <input type="submit" class="attachDocumentsSubmit" value="Upload file" />       
            <input type="button" class="attachDocumentsCancel" value="Cancel" />       
        <% } %>    


$documentsForm.ajaxForm({
        dataType: 'json',
        beforeSubmit: function() {
            // ...
        },
        success: function(data) {
            if (data) {
                // ...
            }
            else {
                alert('Error uploading document. Upload failed.');
            }
        }
    });

Hope that helps.