使用ajax提交後圖片上傳

我想用ajax上傳圖片。但我得到這個錯誤：使用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)); 

} 
?>

來源

2016-06-23 Azzo

你不能發送類似的方式將圖像數據你現在正在做內部的jQuery，你必須將其附加到FormData();中，然後將其提交到您的url，因爲圖像是多部分dat一，下面取代你的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']

來源

2016-06-23 11:17:56

感謝您的回答，現在它工作正常。我有一個關於你的答案的問題，如何在提交後刪除表單值？ – Azzo

@DevStud使用：'$（'＃Form'）。trigger（「reset」）;'裏面的成功回調它將起作用。 –

你上傳的文件信息將在全局數組$ _FILES而不是$ _POST中可用，這就是爲什麼你無法訪問它。您可以像這樣訪問圖像信息

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

您還應該考慮在將數據保存到數據庫之前驗證用戶的輸入。規則1：永遠不要相信這樣的數據

來源

2016-06-23 11:38:17 coderavine

-1

嘗試你的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); 
       } 
     }); 
    });

來源

2016-06-23 13:19:06 srinivas

使用ajax提交後圖片上傳

回答

相關問題