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
– Webomatik, Commented May 5, 2016 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
– Ayuktia, Commented May 5, 2016 at 21:43
@Ayuktia read about forms: stackoverflow.com/a/4526286/4266042, stackoverflow.com/q/23980733/4266042 — Grzegorz Gajda
– Grzegorz Gajda, Commented May 5, 2016 at 21:45
Tell us what happens when you run your code, what error do you get, what behaviour is wrong, etc.. — Webomatik
– Webomatik, Commented May 5, 2016 at 21:47

Ayuktia · Accepted Answer · 2016-06-18 16:36:54Z

<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>

Gerson · Accepted Answer · 2016-05-05 21:56:18Z

0

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";
}
?>

answered May 5, 2016 at 21:56

Gerson

1

Comments

Community · Accepted Answer · 2017-05-23 11:58:49Z

0

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?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 5, 2016 at 22:20

Jeff Puckett

41.6k19 gold badges125 silver badges177 bronze badges

1 Comment

Jeff Puckett Over a year ago

well then you will need to search for your error logs.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related