AJAXでフォームから画像を送信する

Question

私は画像とコメントをアップロードするフォームで作業しています。私はPHPで動作させましたが、今はAJAXでやりたいと思います。私がAJAXでやりたいのは、アップロードが失敗したときに、ユーザーがテキストをすべて入力しなければならないからです（フィールドが空でないか、画像のアスペクト比がオフです）。しかし、私が何をしても、私はAJAXでそれをやっていません。

私はFormDataで、$ .postと$ .ajaxを使ってやろうとしました。私はまた、多くのガイドやこれに関する他の投稿を見てきましたが、何も私にとってはうまくいかないようです。

ここでは、AJAXコールが呼び出すPHPページから、HTMLフォーム、jQuery AJAXコール、およびPHPコードを見つけることができます。 AJAXのconsole.log(data)から

HTMLのFORM

<form action="uploadpost.php" id="postForm" method="POST" enctype="multipart/form-data"> 
     <div class="form-group"> 
      <label for="postImage">Upload image</label> 
      <input type="file" id="fileToUpload" name="postImage" class="form-control"> 
     </div> 

     <div class="form-group"> 
      <label for="description">Write a caption</label> 
      <textarea name="description" id="postMessage" cols="30" rows="5" class="form-control"></textarea> 
     </div> 
     <input type="submit" id="postSubmit" value="Create post" name="upload_image" class="btn btn-primary"> 
    </form> 

AJAX呼び出し

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#postSubmit").on("click", function(e){ 
     var formData = new FormData($("#postForm")); 
     //var message = $("#postMessage").val(); 

     $.ajax({ 
      url: "ajax/postUpload.php", 
      type: "POST",    
      data: formData,    
      contentType: "multipart/form-data",  
      cache: false,    
      processData:false,   
      success: function(data) 
      { 
       console.log(data); 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 

AJAXでPHPコード/ postUpload.php

出力コールリターン

<pre class='xdebug-var-dump' dir='ltr'> 
<b>array</b> <i>(size=0)</i> 
<i><font color='#888a85'>empty</font></i> 
</pre> 

問題は、私は私がcreatePost()を行うことができないPHPページに画像やメッセージを超えるを送信することができないということです。

Answer 1

var formData = new FormData($("#postForm")); 

いるFormDataへの引数には、DOMフォームオブジェクトではなく、jQueryオブジェクトでなければなりません。コンテンツの設定

new FormData($("#postForm")[0]) 

---

手動で入力します。

のcontentType： "multipart/form-data" を、

は...それで境界データを設定するために失敗します。次のように言ってください：

contentType: false, 

... jQueryはそれをまったく設定しようとせず、XHRオブジェクトはFormDataオブジェクトからそれを生成します。