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に提出しなければなりません。画像はmultipart dat

$("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(); PHPの変更内部iSset();ともありません：：、以下にあなたのjavascriptのコードを置き換える

$_POST['Image'] 

に：

$_FILES['Image'] 

Answer 2

ごアップロードされたファイル情報$ _POSTではなく、グローバル配列$ _FILESで利用できるようになり、そのためアクセスできなくなりました。あなたはまた、データベースにデータを保存する前に、ユーザーの入力を検証する検討すべきである。この

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