Sending image file to php through ajax formData

Question

The following is my code.I am unable to send the image file to the php page.I'm using formData and i'm not clear about the concept of it.How do i send it to php page and how do i retrieve The image in php page?

JAVASCRIPT CODE

function UpdateUserDetails() {

   var title = $("#title1").val();
   var store = $(".search-box").val();
   var category= $("#category").val();
   var descp=$("#descp1").val();
   var url=$("#url1").val();
   var id = $("#hidden_user_id").val();
   var form = $('#image1')[0]; 
   var formData = new FormData(form);

   $.post("update.php", {
        id: id,
        title:title,
        store:store,
        category:category,
        descp:descp,
        data:formData,  
        url:url

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

update.php

<?php
include("db_connection.php");
if(isset($_POST))
{
   $id = $_POST['id'];
   $title=$_POST['title'];
   $desc=$_POST['descp'];
   $pname=$_POST['store'];
   $category=$_POST['category'];
   $url=$_POST['url'];

   $path = $_FILES['tmp_name'];
   $name = $_FILES['name'];
   $size = $_FILES['size'];
   $type = $_FILES['type'];

   $content = file_get_contents($path);
   $content = base64_encode($content);

   $sql1 = "update products set title='$title',url='$url',store='$pname', product_catagory='$category', image='$content',size='$size',type='$type',descp='$desc' where id=".$id."";
        if(mysql_query($sql1))
        {
            echo"updated";
        }
        else   
            echo "Not Updated";       
 }
 ?>

Possible duplicate of [Sending multipart/formdata with jQuery.ajax](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — Rushil K. Pachchigar, Feb 20 '17 at 08:38

score 2 · Answer 1 · answered Feb 20 '17 at 08:38

Try this:

Jquery:

$('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_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(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });

Php:

<?php
    if ( $_FILES['file']['error'] > 0 ){
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
        {
            echo "File Uploaded Successfully";
        }
    }

?>

It works for me.

Sending image file to php through ajax formData

JAVASCRIPT CODE

update.php

1 Answers1