jQuery: Upload image without submitting form?

JavaScript
1

I’m trying to upload an image without submitting the form. Here is what I got:

jQuery('.uploadbox').change(function() {
    jQuery.ajax({
        type: "POST",
        url: "includes/friserupload.php",
        success: function(){
            jQuery('div.success').fadeIn();
        }
    });
    return false;
});

The formobject:

<input type="file" name="uploadbox" id="uploadbox" class="uploadbox" size="35"">

And friserupload.php

move_uploaded_file($_FILES["uploadbox"]["tmp_name"],
"../frisers/" . $_FILES["uploadbox"]["name"]);

It comes out as executed but no file in the folder? Any ideas?

Thanks in advance…

2

From what I can tell, $.ajax and its friend $.post aren’t really built for making uploading files easily, which seems like a rather odd shortcoming. It seems like you need plugins to make it easier. The thing is that until recently you did need to submit a form to upload files, and therefore a hidden iframe is normally used. I say that because of the relatively new uploading capabilities of the HttpXMLRequest object and its related File API that Firefox and Chrome support.

In a nutshell, the easiest thing is to use a jQuery plugin like this or [URL=“http://plugins.jquery.com/project/jQuery-File-Upload”]this
I wrote my own script that would also display a thumbnail of the image (via the FileReader object of the File API) and employ drag-and-drop of files directly onto the page, as well as multiple uploads. This helped me quite a bit: Ajax Upload; A file upload script with progress-bar, drag-and-drop.

I can post the code I wrote if you want.

3

Thanks Raffles. I will look into it. It would be great with your code for examples…

4

Actually, my code is too focused on a particular application to be very useful, so I think you’d be better off looking at the code I said helped me write my own.