image upload in jquery code example

Example 1: ajax file upload jquery

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

Example 2: jquery ajax upload image

$(function() {
            $("#imagepicker").change(function(e) {
                e.preventDefault();
                var file_data = $(this).prop('files')[0];
                var form_data = new FormData();

                form_data.append('file', file_data);
                form_data.append('action', 'ajax_image_upload');

                $.ajax({
                    url: 'upload.php',
                    type: 'post',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success: function(response) {
                        console.log(response);

                    },
                    error: function(response) {
                        console.error(response.responseText);
                    }

                });
            });
        });

Example 3: upload multiple image using jquery

$('body').on('click', '#upload', function(e){
        e.preventDefault();
        var formData = new FormData($(this).parents('form')[0]);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            success: function (data) {
                alert("Data Uploaded: "+data);
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
})