画像はアップロード時に常にNULLです

Question

私はajax経由でユーザー登録時に画像をアップロードしようとしています。これはフォーム+名前、パスワード、電子メールのいくつかのフィールドのように見えますが、これはうまく機能しています。私は私のAjaxのスクリプト

var data = $("#login-form").serialize(); 
    var form = new FormData(document.getElementById('picture')); 
    //append files 
    var file = document.getElementById('picture').files[0]; 
    if (file) { 
     form.append('picture', file); 
    } 

にこれを配置する必要があり、これは

function submitForm() 
{ 
    var data = $("#login-form").serialize(); 
    var form = new FormData(document.getElementById('picture')); 
    //append files 
    var file = document.getElementById('picture').files[0]; 
    if (file) { 
     form.append('picture', file); 
    } 
    $.ajax({ 

     type : 'POST', 
     url : 'registration.php', 
     data : data,    
     beforeSend: function() 
     { 
      $("#error").fadeOut(); 
      $("#login").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...'); 
     }, 
     success : function(data) 
     { 
      if(data=="registered") 
      {      
      } 
     } 
    }); 
    return false; 
} 

とサーバ側のために全体のAjaxされるように、私はここに別のスレッド上で発見した

<form method="post" class="registerForm" enctype="multipart/form-data" id="login-form"> 
    <div class="form-group"> 
     <label><b>Profile Image <span class="required">*</span></b></label> 
     <input accept="image/*" type="file" id="picture" name="picture" required> 
    </div> 
    <div class="clearfix"> 
     <button type="submit" id="login" class="signupbtn">Sign Up</button> 
    </div>    
</form> 

画像部分とクエリ

if(!empty($_FILES['picture']) && $_FILES['picture']['size'] >0 ){ 

    $profilePic = $randomString. basename($_FILES['picture']['name']); 
    $uploadfile = $uploaddir .$randomString. basename($_FILES['picture']['name']); 

    if (move_uploaded_file($_FILES['picture']['tmp_name'], $uploadfile)) { 
    } else { 
     $error = "error\n"; 
    } 
}else{ 
    $error ='Please add your Picture!'; 
} 
var_dump($_FILES['picture']); 
try 
{ 
    $stmt = $db_con->prepare("SELECT * FROM users WHERE email=:email"); 
    $stmt->execute(array(":email"=>$email)); 
    $count = $stmt->rowCount(); 

    if($count==0){ 
     $stmt = $db_con->prepare("INSERT INTO users (picture) VALUES (:picture)"); 
     $stmt->bindParam(":picture",$profilePic); 

     if($stmt->execute()) { 
      echo "registered"; 
     } 
     else { echo "Query could not execute !"; } 
    } 
    else{ echo "1"; } 
} 
catch(PDOException $e){ 
    echo $e->getMessage(); 
} 

可能な限りコードを単純に保つために、他のフィールドを削除しました。すべてのフィールドがイメージ名以外のデータベースに挿入され、保存されました。

何が問題なのですか？エラーは一切ありません。私はコンソールにregisteredを持っていて、NULLはvar_dump($_FILES['picture'])のため

Answer 1

あなたがproccessData: falseを使用しない場合はjQueryの文字列としてデータを処理ようになります。ベローコードはうまく動作します。また、コードにいくつかのコメントが含まれています

$(document).ready(function (e){ 
    $("#login-form").on('submit',(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      url: "registration.php", 
      type: "POST", 
      data: new FormData(this), // Data sent to server 
      contentType: false, // The content type used when sending data to the server. 
      cache: false, // To unable request pages to be cached 
      processData:false, // To send DOMDocument or non processed data file it is set to false 
      success: function(data){ 
        if(data=="registered"){} 
      }, 
      error: function(){}    
     }); 
    })); 
}); 

Answer 2

に設定する必要があります.jQueryはcontent-type headeも追加しないので、processDataフラグをfalseに設定します。それ以外の場合、jQueryはFormDataを文字列に変換すると失敗します。

だから、AJAXコードが

$(".signupbtn").click(function(e){ 
    e.preventDefault(); 
    var form = new FormData(document.getElementById('picture')); 
//append files 
var file = document.getElementById('picture').files[0]; 
if (file) { 
    form.append('picture', file); 
} 

    $.ajax({ 

     type : 'POST', 
     url : 'registration.php', 
     data : form, 
     contentType: false, 
     processData: false,   
     success : function(data){} 
    }); 
});