Passing image to php via Ajax

Question

I have a site where I am allowing a user to select an image. I want this image to be uploaded to my database. I am using php to upload and using Ajax function to pass the image. However, it looks like the image is not really passing as an image but as a .bin when I open the image from my database. Here is my Ajax function

<script>
function AddItem(){
var name = document.forms["additemform"]["nc_name"].value;
var tag = document.forms["additemform"]["nc_tag"].value;
var description = document.forms["additemform"["nc_description"].value;
var image = document.forms["additemform"]["nc_image"].value;

  var isValid = false;
  $.ajax({           
      type: "POST",  
      url: "/AddNewItem.php",  
      data: { "Item_Name": name, "Item_Tag": tag, "Item_Description": description, "Item_Image": image },
      dataType: "json",
      success: function(resp){
        console.log(resp);
        if(resp.reply == "Success")
        {
            isValid = true;
          form.submit();
        }
        else
        {
        isValid = false;
        }
      },
      error: function(data, status){
        console.log(data, status);
        alert("error")
      }

    }); //end Ajax
    console.log(isValid);
     return isValid;
};
</script>

In my AddNewItem.php files, I am grabbing the image like this:

$itemimage = base64_encode($_POST["Item_Image"]);

after this, I simply upload to database. Uploading is working but it looks like I am uploading in wrong format. What am I doing wrong. I need to make sure it is a jpeg getting uploading but it is uploading in a .bin format.

Please check how to upload an image with jquery and PHP. https://www.formget.com/ajax-image-upload-php/ — Shubham Azad, Jan 25 '19 at 04:45
Please see StackOverflow question. https://stackoverflow.com/questions/19447435/ajax-upload-image — Shubham Azad, Jan 25 '19 at 04:48
Possible duplicate of [Ajax Upload image](https://stackoverflow.com/questions/19447435/ajax-upload-image) — Georgi Georgiev, Jan 25 '19 at 07:04

score 0 · Answer 1 · answered Jan 25 '19 at 02:33

0

you can use FormData example

$('#add_form').submit(function (e) {
e.preventDefault();
var name_ar = $('#form_name_ar').val();
var name_en = $('#form_name_en').val();
var token = $('#form_token').val();
var formData = new FormData($('#add_form')[0]);
formData.append('file', $('input[name=form_file]')[0].files[0]);
formData.append('name_ar', name_ar);
formData.append('name_en', name_en);
formData.append('_token', token);

$.ajax({
    url: add_url,
    method: 'post',
    data: formData,
    contentType: false,
    processData: false,
    success: function (data) {
        toastr.success(data);
        $('#users-table').DataTable().ajax.reload();
        $('#form_name_ar').val('');
        $('#form_name_en').val('');
        $("html, body").animate({
            scrollTop: 0
        }, 1000);
    },
    error: function(data){
        toastr.error(data.responseJSON)
    }
})

});

answered Jan 25 '19 at 02:33

ahmed abdelaty

79
2

Thanks, but still a little confused, In the FormData example, which variable is handling the image? – BEP Jan 25 '19 at 03:47
formData.append('file', $('input[name=form_file]')[0].files[0]); file is = image you can use that like formData.append('image', $('input[name=image]')[0].files[0]); $('input[name=image]') = input form name image – ahmed abdelaty Jan 25 '19 at 11:37
thanks. making more sense to me. But what about my other inputs. name and item tag. which variable are they in? – BEP Jan 26 '19 at 21:26
var tag= $('#tag').val(); var name= $('#name').val(); formData.append('tag', tag); formData.append('name', name); – ahmed abdelaty Jan 31 '19 at 20:02

Passing image to php via Ajax

1 Answers1