Send an image onchange through AJAX

Question

Hi. i have this code :

<input name="userfile" onchange="loadPlayerPhoto('1')" type="file" value="fotog">

function loadPlayerPhoto(photoid) {
    $.ajax({
        type: 'POST',
        cache: false,
        url: './auth/ajax.php',
        data: 'idp='+escape(photoid)+'&id=loadplayerphoto',
        success: function(msg) {
            $('#ppid'+photoid).html(msg);
        }
    });
    return false;
}    

when a user select the photo, it call that function. I need to send the photo via ajax. How can send it to the server?

Answer 1

I would use the AJAX Upload File Plugin

You could also look at the source code of this page, although I am not sure what the licencing is on this plugin.

Answer 2

If you are using PHP as a server side language then you can use the below plugin -

http://www.webmotionuk.co.uk/jquery-image-upload-and-crop-for-php/

You can also try below plugin if your server side language is not PHP -

http://plugins.jquery.com/project/AjaxMultiFileUpload