使用jqueryajax将图像上传到文件夹 - upload image to a folder using jqueryajax

upload image to a folder using jqueryajax

本文关键字：文件夹图像 jqueryajax 使用 | 更新日期: 2023-09-27

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>

我的php文件是

主页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());

我无法将文件上传到文件夹。请任何人帮助我…

您可以使用new FormData($(this)[0]);进行图像发布。使用此更改您的代码

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());
?>