Passing Image using Ajax to PHP

Question

I am trying to pass an image and a title field value to PHP, I usually process file uploads straight with PHP using the $_FILES array, I am not sure how to create/pass this

Answer 1

I did that in one of my project, and following code works for me. Please do required modifications in code as your need.

My Form button:

 


Save

My JQuery/Ajax :

$('#upload_image').click(function()
{
    var form = new FormData(document.getElementById('upload_img'));
    //append files
    var file = document.getElementById('upload-image').files[0];
    if (file) {   
        form.append('upload-image', file);
    }
    $.ajax({
        type: "POST",
        url: "URL",
        data: form,             
        cache: false,
        contentType: false, //must, tell jQuery not to process the data
        processData: false,
        //data: $("#upload_img").serialize(),
        success: function(data)
        {
            if(data == 1)
                $('#img_msg').html("Image Uploaded Successfully");
            else
                $('#img_msg').html("Error While Image Uploading");
        }
    });
    //alert('names');


});