Update Image from database using ajax, jquery,and PHP not working

Question

I wanna update profile picture of user that has logged in to my website. I use ajax, jquery, php to update data, in order to update data without refresh the page. This code just working to upload image into folder, but when I use this code to update image from database, it only sent null into database.

jquery and ajax script

$("#form-ava").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "../config.inc/upload.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        beforeSend : function()
        {
            //$("#preview").fadeOut();
            $("#err").fadeOut();
        },
        success: function(data)
        {
            if(data=='invalid')
            {
                // invalid file format.
                $("#err").html("Invalid File !").fadeIn();
            }
            else
            {
                // view uploaded file.
                $("#preview-ava").html(data).fadeIn();
                $("#form-ava")[0].reset();
      $("#hidden-list").hide();
            }
        },
        error: function(e)
        {
            $("#err").html(e).fadeIn();
        }
   });
}));

And it's the php syntax upload.php

<?php
require_once 'koneksi.php';
 if($_POST)
{
  $id_user= $_POST['id_user'];
  $img = $_FILES['image']['name'];
  $tmp = $_FILES['image']['tmp_name'];

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = '../images/ava/'; // upload directory
  try {

// get uploaded file's extension
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

// can upload same image using rand function
$final_image = rand(1000,1000000).$img;

// check's valid format
if(in_array($ext, $valid_extensions))
{
    $path = $path.strtolower($final_image);

    if(move_uploaded_file($tmp,$path))
    {
        echo "<img src='$path' />";

}
else
{
    echo 'invalid';
}
$update = $db_con->prepare("UPDATE tb_users SET image=:img WHERE id_user=:id_user");
$update->bindparam(":id_user", $id_user);
$update->bindparam(":img", $image);
$update->execute();
$count = $update->rowCount();
if($count>0) {
echo "success";
}else {
echo "can't update!";
}
}
}catch(PDOException $e) {
echo $e->getMessage();
}
}
?>

HTML syntax

<form id="form-ava" action="../config.inc/upload.php" method="post" enctype="multipart/form-data">
         <input type="hidden" id="id_user" name="id_user" value="<?php echo $row->id_user;?>">
                <input id="ava-img" type="file" name="image" value="<?php echo $row->image;?>"/>
                    <input id="button" type="submit" value="Simpan" name="update"></br>
         <a href="#" class="btn btn-large btn-success" id="cancel-act"></i> &nbsp; Batal</a>
     </form>
       <div id="err"></div>

We will not write the code for you... please try something, then we can help with the debugging ; ) — Webomatik, May 05 '16 at 21:40
@Webomatik sorry, I don't ask you to write the code.. I just ask somebody to tell me why it's not working... — Ayuktia, May 05 '16 at 21:43
@Ayuktia read about forms: http://stackoverflow.com/a/4526286/4266042, http://stackoverflow.com/q/23980733/4266042 — Grzegorz Gajda, May 05 '16 at 21:45
Tell us what happens when you run your code, what error do you get, what behaviour is wrong, etc.. — Webomatik, May 05 '16 at 21:47
Could it be because you never close your if statement at the end of your php? — Jeramiah Harland, May 05 '16 at 22:01
@GrzegorzGajda i've tried it, but the alert says "[object FormData]", I don't know whether it's error message or not.. but the image can't update yet... — Ayuktia, May 05 '16 at 22:31
@Webomatik sorry for my mistake, I forgot to write the error... Thanks anyway... — Ayuktia, May 05 '16 at 22:34

score 2 · Accepted Answer · answered Jun 18 '16 at 16:36

<form id="form-ava" action="../config.inc/upload.php" method="post" enctype="multipart/form-data">
     <input type="hidden" id="id_user" name="id_user" value="<?php echo $row->id_user;?>">
            <input id="ava-img" type="file" name="image" value="<?php echo $row->image;?>"/>
                <input id="button" type="submit" value="Simpan" name="update"></br>
     <a href="#" class="btn btn-large btn-success" id="cancel-act"></i> &nbsp; Batal</a>
 </form>
   <div id="err"></div>


<script type="text/javascript">
$("#form-ava").on('submit',(function(e) {
e.preventDefault();
$.ajax({
    url: "../config.inc/upload.php",
    type: "POST",
    data:  new FormData(this),
    contentType: false,
    cache: false,
    processData:false,
    beforeSend : function()
    {
        //$("#preview").fadeOut();
        $("#err").fadeOut();
    },
    success: function(data)
    {
        if(data=='invalid')
        {
            // invalid file format.
            $("#err").html("Invalid File !").fadeIn();
        }
        else
        {
            // view uploaded file.
            $("#preview-ava").html(data).fadeIn();
            $("#form-ava")[0].reset();
  $("#hidden-list").hide();
        }
    },
    error: function(e)
    {
        $("#err").html(e).fadeIn();
    }
});
}));
</script>

score 0 · Answer 2 · answered May 05 '16 at 21:56

I found two errors in your code in proses.php

<?php include 'koneksi.php'; 
$foto = @$_POST['foto'];
$id = @$_POST['id'];
$update = $db->prepare("UPDATE tb_users SET foto=:foto WHERE id=:id");
$update>bindParam(":id", $id);
$update->bindParam(":foto", $foto);
$update->execute();
if($update->rowCount() > 0) {
  echo "success";
}
?>

score 0 · Answer 3 · edited May 23 '17 at 11:58

the error messages would be very helpful, but at the very least you are missing a - in $update>bindParam(":id", $id);, so it should be $update->bindParam(":id", $id);

you did the same thing again with $update>rowCount() should be $update->rowCount()

update: I see you edited your question to fix those, but still haven't posted the errors you're receiving. Were those tpyos in your question, or are you progressively fixing your code?

still, it looks like you're missing a closing curly brace } in this statement:

if($update>rowCount() > 0) {
  echo "success";
 ?>

also, why are you silencing notices with @$_POST? if those values are empty, then do you really want to be updating the table?

well then you will need to search for your error logs. – Jeff Puckett May 05 '16 at 23:10 — Jeff Puckett, May 05 '16 at 23:10

Update Image from database using ajax, jquery,and PHP not working

3 Answers3