使用jquery ajax将图像上传到文件夹

Question

home.php

<form role="form" name="form1"  id="myform" enctype="multipart/form-data">
                              <div class="form-group">
                                  <label >Title</label>
                                  <input type="text" class="form-control" name="title_name" id="title" placeholder="Enter Title" required>
                              </div>

                              <div class="form-group">
                                  <label >Upload Image</label>
                                  <input type="file" id="imagefile" name="image_file" required>

                              </div>

                              <button type="submit" class="btn btn-primary" id="submit1" name="submit">Submit</button>
                          </form>

        <script>


                $("#myform").submit(function(e){
                    e.preventDefault();
                });

                $("#submit1").click(function(){
                    var title = $("#title").val();
                    var imagefile = $("#imagefile").val();

                    var mydata = {'title_name':title,'image_file':imagefile}; 

                  $.ajax({
                      url:"home-insert.php",
                      type:"POST",
          cache: false,
                      data: mydata,
                      success: function(data){
                          $("#title").val('');
                          $("#imagefile").val('');
                      }
                  });        
                });
                </script>

my php file is

home-insert.php

$title_name = $_POST['title_name'];
               $image_file = $_POST['image_file'];

               $name = $_FILES['image_file']['name'];
               $tmp_name = $_FILES['image_file']['tmp_name'];

      move_uploaded_file($tmp_name,"uploads/".$name);
                   mysql_query("INSERT INTO home (title,image) VALUES ('".$title_name."','".$image_file."')") or die(mysql_error());

I am unable to upload file to to the folder.please any one help me....

Answer 1

You can use new FormData($(this)[0]); for image post. Change your codes with this

home.php

---

<form role="form" name="form1"  id="myform" enctype="multipart/form-data">
    <div class="form-group">
        <label >Title</label>
        <input type="text" class="form-control" name="title_name" id="title" placeholder="Enter Title" required>
    </div>

    <div class="form-group">
        <label >Upload Image</label>
        <input type="file" id="imagefile" name="image_file" required>
    </div>
    <button type="submit" class="btn btn-primary" id="submit1" name="submit">Submit</button>
</form>

<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script>
        $("#myform").on("submit", function(e){
            e.preventDefault();

            var mydata = new FormData($(this)[0]);

            $.ajax({
                url:"home-insert.php",
                type:"POST",    
                cache: false,
                contentType: false,
                processData: false,
                data: mydata,
                success: function(data){
                    $("#title").val("");
                    $("#imagefile").val("");
                }
            });        
        });
</script>

home-insert.php

---

<?php
$title_name = $_POST['title_name'];
$name = $_FILES['image_file']['name'];
$tmp_name = $_FILES['image_file']['tmp_name'];

move_uploaded_file($tmp_name,"./uploads/".$name);
mysql_query("INSERT INTO home (title,image) VALUES ('".$title_name."','".$name."')") or die(mysql_error());

?>