How to pass image from html to php through ajax

Question

function UpdateUserDetails() 
{
   var title = $("#title1").val();
   var store = $(".search-box").val();
   var category= $("#category").val();
   var descp=$("#descp1").val();
   var price=$("#price1").val();
   var value=$("#value1").val();
   var location=$("#location1").val();
   var url=$("#url1").val();
   var id = $("#hidden_user_id").val();

   $.post("update.php", {
        id: id,
        title:title,
        store:store,
        category:category,
        descp:descp,
        price:price,
        value:value,
        location:location,
        url:url

    },
    function (data, status) {
        $("#update_user_modal").modal("hide");
    }
);
}

The above is my code where it fetches values from html form and then sends to update.php file. How can i send a image file through this function along with all the variables? should i send it as file itself or by encoding it? Help me out!!

Possible duplicate of [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — roberto06, Feb 17 '17 at 10:03
try to search by byte array image ajax, sure something exists. — Álvaro Touzón, Feb 17 '17 at 10:03
can u edit the above code with sample image variable? @roberto06 — SUNIL, Feb 17 '17 at 10:05

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

Very basic approach is:

Convert image to base64-data How to convert image into base64 string using javascript
Send it via ajax as string and on server side just base64_decode($b64Image) and save raw data to file

But don't forget to set post_max_size in php.ini and/or in Nginx body_size (i forget how it named)

edited May 23 '17 at 10:29

Community

1
1

answered Feb 17 '17 at 10:38

edwardstock

168
2
10

score 0 · Answer 2 · answered Feb 17 '17 at 11:18

You can use FormData to pass files to your php file through ajax. For example:

$(':file').change(function() {
var data = new FormData();
jQuery.each(jQuery(':file')[0].files, function(i, file) {
    data.append('file[]', file);
});

Then you can send it by ajax:

    jQuery.ajax({
    url: 'your url',
    data: data,
    cache: false,
    dataType: 'json',
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
       //your code
    }
});

Now you can treat these files like $_FILES['file'] array on your php.

How to pass image from html to php through ajax

2 Answers2