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 — Rushil K. Pachchigar
– Rushil K. Pachchigar, Commented Feb 20, 2017 at 8:38

Mayank Pandeyz · Accepted Answer · 2017-02-20 08:38:28Z

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.

Collectives™ on Stack Overflow

Sending image file to php through ajax formData

JAVASCRIPT CODE

update.php

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JAVASCRIPT CODE

update.php

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related