PHP，AJAX和Mysql

Question

i'm a newbie and i want to ask my project, i'm created a file to upload image and save to database MySql, where its file will be divided into 3 file

1. File HTML, this is my code :

       <form class="form-horizontal" id="inputForm" enctype="multipart/form-data"><input type="hidden" id="id">
             <div class="form-group">
               <label for="name" class="col-sm-2 control-label">Video Name</label>
               <div class="col-sm-6">
                 <input type="text" class="form-control" id="name" placeholder="Video Name">
               </div>
             </div>
             <div class="form-group">
               <label for="nama" class="col-sm-2 control-label">Video URL</label>
               <div class="col-sm-6">
                 <input type="text" class="form-control" id="url" placeholder="https://www.youtube.com/watch?v=ki_dQd8hJP4">
               </div>
             </div>
             <div class="form-group">
               <label for="date" class="col-sm-2 control-label">Date Created</label>
               <div class="col-sm-3">
                 <input type="date" class="form-control" id="date">
               </div>
             </div>
             <div class="form-group">
               <label for="nama" class="col-sm-2 control-label">Image</label>
               <div class="col-sm-3">
                   <input type="file" id="image" class="form-control">
               </div>
             </div>
             <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                 <button type="button" class="btn btn-primary glyphicon glyphicon-save" id="btnSave">Save</button>
                 <button type="button" class="btn btn-danger glyphicon glyphicon-remove" id="btnReset">Reset</button>
               </div>
             </div>
       </form>
   

---

1. File JavaScript :

 $(document).ready(function(){
    Modul.find("button#btnSave").click(function(){
        var name_gr=Modul.find('input#name').val();
        var url_gr=Modul.find('input#url').val();
        var date_gr=Modul.find('input#date').val();
        var image_gr=Modul.find('input#image').val();
        var id_gr=Modul.find('input#id').val();
        $.ajax({
            type    :"POST",
            dataType    : 'json',
            url :"page/video/process_video.php",
            data    :{action:'commit', name:name_gr ,url:url_gr, date:date_gr , image:image_gr ,id:id_gr},
                      success:function(json){
                      alert(json);
                     },
                     complete:function(){
                        selectVideo();
                        Modul.find("div#list").fadeIn();
                        Modul.find("div#form").hide();              
                     }
        });
    }); });

---

1. File PHP :

    <?php error_reporting(0);    include "../../config/conn.php"; <br> $ACTION=$_POST['action'];
switch($ACTION){      
    case "commit":
        $ID=$_POST['id'];
        $NAME=$_POST['name'];
        $URL=$_POST['url'];
        $DATE=$_POST['date'];
        $IMAGE=$_POST['image'];
        if($ID==""){
            $query="insert into tb_video (videoname, urlembed, datecreated, gambar) values('$NAME','$URL', '$DATE', '$IMAGE')";
        }else{
            $query="update tb_video set videoname='$NAME',urlembed='$URL',datecreated='$DATE', gambar='$GAMBAR' where idvideo='$ID' ";
        }
        $result=mysql_query($query);
        if($result){
            $msg="Data successfully saved / updated";
            header("refresh:0; url=?page=video");
        }else{
            $msg="Data failed stored / updated";
            header("refresh:0; url=?page=video");
        }
        echo json_encode($msg);
    break;
    default:
        echo json_encode("error");
    break;
    }
?>

Then, how can i take the value of input file types with ajax and then upload an image file and saves it into a MySQL database with ajax. Thank you very much for reading this and sorry if there are less. :)

</div>

Answer 1

Hello Wahyudi Andrian,

If you need to save the image I would recommend you something like this: Php code:

<?php
error_reporting(0);
include "../../config/conn.php";
$ACTION=$_POST['action'];
 switch($ACTION){      
 case "commit":
 $ID=$_POST['id'];
 $NAME=$_POST['name'];
 $DATE=$_POST['date'];
 $IMAGE=$_POST['image'];
 // Image Details...
 $IMAGE = $_FILES['image']['name'];
 $IMAGE_SIZE =$_FILES['image']['size'];
 $IMAGE_TMP =$_FILES['image']['tmp_name'];
 $IMAGE_TYPE=$_FILES['image']['type']; 
 $chk_ext = explode(".",$IMAGE);      
 $expensions= array("jpeg","jpg","png"); // Extension of the files
 if( $IMAGE != null ){
  if( in_array(strtolower(end($chk_ext)),$expensions)=== false ){
   $err[]= '[Error] Extension not allowed';
  }
 }
 if( count($err) == 0 ){
  $file_name = $sku.".".strtolower(end($chk_ext));
  $url_imagen = "url_of_the_images/".$file_name;
  move_uploaded_file("url_of_the_images/".$file_name);
  if($ID==""){
   $query="insert into tb_video (videoname, urlembed, datecreated, gambar)values('$NAME','$url_imagen', '$DATE', '$IMAGE')";
  }else{
   $query="update tb_video set videoname='$NAME',urlembed='$url_imagen',datecreated='$DATE', gambar='$GAMBAR' where idvideo='$ID' ";
  }
  $result=mysql_query($query);
 }
 if($result){
  $msg="Data successfully saved / updated";
  header("refresh:0; url=?page=video");
 }else{
  $msg="Data failed stored / updated";
  header("refresh:0; url=?page=video");
 }
 echo json_encode($msg);
 break;
 default:
 echo json_encode("error");
 break;
}

In this example you can see that I am using a folder to save the image and I added the url into the table. I hope it can be of help.