javascript - Image upload with ajax and php after submit -

i have modal submit information , image through form database. working php , javascript...well not js need help.

work have done far can insert data form db without no errors don't know how start , image upload. working on localhost.

i want upload image local folder , automatically rename title entered through form. name of image saves table , image in folder.

i past code here if can me code appreciate it.

ajax:

    $(document).ready(function(){      $('form.insert-movie').on('submit', function(e) {         e.preventdefault();          var = $(this),             url = that.attr('action'),             method = that.attr('method'),             data = {};          that.find('[name]').each(function(index, value) {             var = $(this),                 name = that.attr('name'),                 value = that.val();              data[name] = value;         });           $.ajax({             url: url,             type: 'post',             data: data,             success: function (msg) {                                    alert("your success message here");             },             error: function (msg) {                 alert("error " + msg.d.tostring());             }         });         return false;     });  }); 

queries:

    <?php  include 'config.php';  $pdo = connect();  if(isset($_post['inputtitle'], $_post['inputyear'], $_post['inputduration'], $_post['inputdescription'], $_post['inputgender'])) {      $inputtitle       = $_post['inputtitle'];     $inputyear        = $_post['inputyear'];     $inputduration    = $_post['inputduration'];     $inputdescription = $_post['inputdescription'];     $inputgender      = $_post['inputgender'];     $inputimage       = $_post['inputimage'];      $sql = $pdo->prepare("insert filmovi(naslov,godina,trajanje,opis,id_zanr,slika)                            values(:field1,:field2,:field3,:field4,:field5,:field6)");     $sql->execute(array(':field1' => $inputtitle,                         ':field2' => $inputyear,                          ':field3' => $inputduration,                          ':field4' => $inputdescription,                          ':field5' => $inputgender,                         ':field6' => $inputimage));     $affected_rows = $sql->rowcount();    } 

modal:

    <form action="inc/queries.php" method="post" class="insert-movie" enctype="multipart/form-data">    <div class="form-group"> <!-- title -->     <label for="title">title</label>     <input type="text" class="form-control" name="inputtitle" id="inputtitle" placeholder="enter title" required>   </div>    <div class="form-group"> <!-- year -->     <label for="year">year</label>     <input type="date" class="form-control" name="inputyear" id="inputyear" placeholder="year" required>   </div>    <div class="form-group"> <!-- duration -->     <label for="year">duration</label>     <input type="time" class="form-control" name="inputduration" id="inputduration" placeholder="duration" required>   </div>    <div class="form-group"> <!-- gender -->     <label for="year">gender</label></br>     <select name="inputgender">         <option>select genre</option>         <?php         $pdo = connect();         // display list of members in table view         $sql = "select * zanr";         $query = $pdo->prepare($sql);         $query->execute();         $list = $query->fetchall();                foreach ($list $rs) {         ?>           echo'            <option name="inputgender" value="<?php echo $rs['id'] ?>"><?php echo $rs['naziv'] ?> </option>'          <?php } ?>     echo'        </select>   </div>    <div class="form-group"> <!-- description -->     <label for="year">description</label>     <textarea class="form-control" name="inputdescription" placeholder="description" rows="3" required></textarea>   </div>    <div class="form-group"> <!-- image -->     <label for="image">image upload</label>     <input type="file" name="inputimage" id="inputimage">     <p class="help-block">select image of movie.</p>   </div> 

close

first, must handle file upload. examples here: http://php.net/manual/en/features.file-upload.post-method.php second need figure out want store in database.

<?php include 'config.php';  $pdo = connect();  if(isset($_post['inputtitle'], $_post['inputyear'], $_post['inputduration'], $_post['inputdescription'], $_post['inputgender'])) {      $inputtitle       = $_post['inputtitle'];     $inputyear        = $_post['inputyear'];     $inputduration    = $_post['inputduration'];     $inputdescription = $_post['inputdescription'];     $inputgender      = $_post['inputgender'];      $uploaddir = '/var/www/uploads/'; // change path on server     $uploadfile = $uploaddir . basename($_files['inputimage']['name']);     if (move_uploaded_file($_files['inputimage']['tmp_name'], $uploadfile)) {          $inputimagestorepath = $uploadfile;          $inputimage = $_files['inputimage']['name'];     } else {          $inputimage = "";     }      $sql = $pdo->prepare("insert filmovi(naslov,godina,trajanje,opis,id_zanr,slika)                            values(:field1,:field2,:field3,:field4,:field5,:field6)");     $sql->execute(array(':field1' => $inputtitle,                         ':field2' => $inputyear,                          ':field3' => $inputduration,                          ':field4' => $inputdescription,                          ':field5' => $inputgender,                         ':field6' => $inputimage));     $affected_rows = $sql->rowcount();    } ?> 

i advise using formdata ajax:

$('form.insert-movie').on('submit', function(e) {      e.preventdefault();      var formdata = new formdata($('form.insert-movie')),          url = $(this).attr('action'),          method = $(this).attr('method');       $.ajax({          url: url,          type: 'post',          data: formdata,          success: function (msg) {                                   alert("your success message here");               // close modal here .hide() ?          },          error: function (msg) {               alert("error " + msg.d.tostring());          }      });  });