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 array using ajax to PHP. My form:

<form role="form" name="updateProductForm" id="updateProductForm" method="POST" enctype="multipart/form-data"> 
    <input name="imgOne" id="imgOne" type="file" title="Add Image">
    <a class="btn btn-primary" name="updateProduct" id="updateProduct">Update Product</a></div>
</form>

And I am trying to use this to pass to PHP:

$('#updateProduct').on('click', function() {
    try {
        ajaxRequest = new XMLHttpRequest();
    } catch (e) {
        try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Your browser broke!");
                return false;
            }
        }   
    }
    ajaxRequest.open("POST", "../Controller/ProductController.php", true);
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send("title=" + $("#title").val() + "&imgOne=" + $("#imgOne"));

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            console.log(ajaxRequest);
        }
    }

});

In PHP I am trying this:

if (isset($_POST["edit"])) {
    $id = $_POST["edit"];
    $imgName = $_FILES["file"]["imgName"];
}

Youssef

You need `multipart/form-data`: http://stackoverflow.com/questions/21023373/uploading-image-using-javascript?lq=1 jQuery abstracts this making it more cross-browser (though not universally supported): http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery?lq=1 — Sergiu Paraschiv, Jun 27 '14 at 07:32

score 4 · Accepted Answer · answered Jun 27 '14 at 07:47

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:

 <form name="upload_img" enctype="multipart/form-data" id="upload_img">
<input type="file" style="display:none" id="upload-image" name="upload-image"></input>
<button id="upload_image" type="button">Save</button>
</form>

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');


});

score -1 · Answer 2 · answered Jun 27 '14 at 07:35

You can use jQuery file upload plugin

$('#imgOne').change(function(){ 

  $.ajaxFileUpload({

        fileElementId: 'imgOne',
        url: "../Controller/ProductController.php",

        dataType: 'json',

        success: function(response)
        {
         //Success Code Here
        },

        error: function()
        {
           //Error Code Here
        }
  });
});

Rahul Shukla · Answer 3 · 2020-06-18T15:15:16.630

First You need to Select image file through following line of html code
```
input type="file" id="image_to_upload"
```

After that you need to write the following jQuery code to catch this event.


    jQuery.noConflict();    
    formdata = new FormData();      
    jQuery("#image_to_upload").on("change", function() {
        var file = this.files[0];
        if (formdata) {
            formdata.append("image", file);
            jQuery.ajax({
                url: "destination_ajax_file.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success:function(){}
            });
        }                       
    });

In the destination ajax file you can access image by the following variable
```
print_r($_FILES);
```

More Info: http://www.rscoder.com/2020/06/how-to-upload-image-file-using-ajax.html

Passing Image using Ajax to PHP

3 Answers3

Linked