Ayuktia Ayuktia - 5 months ago 23
jQuery Question

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

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>

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