使用ajax提交后上传图片

Question

我正在尝试使用Ajax上传图像。 但我收到此错误：

Notice: Undefined index: Image in /Applications/MAMP/htdocs/request/insert.php on line 8

Notice: Undefined index: Image in /Applications/MAMP/htdocs/request/insert.php on line 9

单击插入按钮后，然后我得到那个错误。 问题只是图像部分。 其他详细信息仍将发布。 我错过了一些东西，但我找不到。 有人可以在这里帮助我吗？

我的ajax代码在这里：

// Insert 
  $("body").on("click",".insert", function(){

     var Desc = $(".Desc").val();
     var Title = $(".Title").val(); 
     var Image = $("#Image").val();

     var dataString = 'Desc=' + Desc +  '&Title=' + Title + '&Image=' + Image ;
     $.ajax({
        type: "POST",
        url:"request/insert.php",
        data: dataString,
        cache:false,
        success: function(html){
          // Do something   
        } 
     });

  });

的HTML

<form method="post" action="" id="Form" enctype="multipart/form-data">
   <div class="file-field input-field">
      <div class="btn">
         <span>File</span>
         <input type="file" name="Image" id="Image">
      </div>

   </div>
   <div class="row">
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" name="Desc" class="materialize-textarea Desc"></textarea>
          <label for="textarea1">Textarea</label>
        </div>
      </div>
  </div>
  <div class="row">
    <div class="input-field col s6">
      <input  name="Title" id="first_name2" type="text" class="validate Title">
      <label class="active" for="first_name2">First Name</label>
    </div>
  </div>
    <div class="btn waves-effect waves-light insert" name="action">Submit
    <i class="material-icons right">send</i>
    </div>

</form>

的PHP

<?php 
include_once 'functions/db.php';
if(isSet($_POST['Title']) && isSet($_POST['Desc']) && isSet($_POST['Image'])) {

    $Title = mysqli_real_escape_string($db, $_POST['Title']);
    $Desc = mysqli_real_escape_string($db, $_POST['Desc']);

    $Image = $_FILES['Image']['name'];
    $image_tmp= $_FILES['Image']['tmp_name'];
    move_uploaded_file($sliderPath);

    $insert_query = mysqli_query($db,"INSERT INTO Post(Title,Desc,Image) VALUES ('$Title','$Desc','$Image')") or die(mysqli_error($db));

}
?>

Answer 1

您不能像现在在jquery中那样发送图像数据，而必须将其附加到FormData(); 然后将其提交到您的url，因为该图像是多部分数据，请用以下代码替换您的javascript代码：

$("body").on("click",".insert", function(){

     var data = new FormData();
     data.append('Desc',$(".Desc").val());
     data.append('Title',$(".Title").val());
     var Image = $("#Image").prop("files")[0];;
    data.append('Image',Image);
     $.ajax({
        type: "POST",
        url:"request/insert.php",
        data: data,
        cache:false,
        processData:false,
        contentType:false,
        success: function(html){
          // Do something   
        } 
     });

  });

在php内部是isset(); 不是iSset(); 以及内部php change：

$_POST['Image'] 

至 ：

$_FILES['Image']

Answer 2

您上载的文件信息将在全局数组$ _FILES中可用，而不在$ _POST中可用，这就是为什么您无法访问它。 您可以像这样访问图像信息

$imageName = $_FILES['Image']['name']

您还应该考虑在将数据保存到数据库之前验证用户的输入。 规则1：永远不要信任此类数据

Answer 3

像这样尝试您的ajax调用，它将肯定起作用。

$("#Form").on("submit",function(e){
        e.preventDefault();
            var dataString  =  new FormData(this);
           $.ajax({
            type: "POST",
            url:"img1.php",
            data: dataString ,
            processData: false,
            contentType: false,
            success: function(html){
             console.log(html);
            }, 
            error: function(data){
                    console.log("error");
                    console.log(data);
                }
         });
     });