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();内，然后将其提交到您的网址，因为图片是多部分数据，请替换您的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更改内部：

$_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);
                }
         });
     });

使用ajax提交后的图片上传

3 个答案: