写真とタグを1つのAjaxリクエストに追加する

Question

私は、ユーザーが写真をアップロードしたり、コメントやタグを追加できるページを作成しています。写真がアップロードされる前に、それがユーザに表示されます。 ユーザーが投稿ボタンを押すと、データがデータベースに送信されます。私の問題は、写真とタグの両方を同時にアップロードできないことです。 TokenInputプラグインを使用してタグをキャッチしています。

<form method="post" action="" class="snap-pic"> 
    <section class="new-snap-upload"> 
    <img src="images/newsnap-icon.png" alt="Image" class="newsnapbox"> 
    <div class="errortext" style="color: red;"></div> 
    <input type="file" name="newsnap" id="uploadnewsnap"> 
    <button id="imgbutton">Upload Snap</button> 
    </section>    
    <section class="snapitems"> 
    <h5>About this outfit</h5> 
    <textarea rows="10" cols="60" name="aboutoutfit" class="aboutfit"></textarea> 
    <div class="error-items" style="color: red;"></div> 
    </section> 
    <section class="snaptags"> 
     <h5>Tags</h5> 
     <input type="text" name="tags" class="tagbox-snap"> 
     <div class="error-tags" style="color: red;"></div> 
     <img src='' alt="" class="loader-gif"></img> 
    </section> 
     <input type="submit" class="submit-snap" name="submit-snap" value="Post!"> 
</form> 

アップロードスナップ上のユーザーのクリックは、彼らがアップロードしたい写真を選択して取得し、それが<img>タグに表示されます

。 その後、投稿をクリックすると、データをデータベースに送信します。私は、この機能を使用しています：

$(".snap-pic").on('submit', (function (e) { 
    e.preventDefault();    
    $(".errortext").text('Loading...'); 
    $.ajax({ 
     url: "snap-ajax.php",   
     type: "POST",    
     data: new FormData(this), 
     contentType: false,  
     cache: false,    
     processData: false,   
     success: function (data) 
     { 
      $(".errortext").text('OK'); 
     } 
    }); 
    } 
)); 

が、私はこれを使用しているタグを挿入するには：

var names = []; 
      $('.tagbox-snap').siblings("ul").find('li p').each(function() { 
       names.push($(this).html()); 
       //names.push($(this).text());//possibly better 
       tags = names.join() 
      }); 
$.ajax ({ 
      url: "ajax-training.php", 
      type: "POST", 
      data: {'tags': tags}, 
      success: function (data) { 
      alert(data); 
        }, 

      error: function() { 
      alert("Problem"); 
      } 
      }); 

は、しかし、私は同時に両方の機能を使用するように見えることはできません。私が写真をアップロードするために使用するとき、私はタグのためにそれを使用することができません。 {'tags'：tags}と一緒に新しいFormDataを送信できますか？私は実際にどのようにFormDataを使用するか分からない。 私はそれを同じページに送ります。

混乱した投稿には申し訳ありませんが、十分にわかりやすいと思います。 ありがとうございました。

Answer 1

MDN FormData docsからFormData.append()を使用できます。

$(".snap-pic").on('submit', (function (e) { 
    e.preventDefault();    
    $(".errortext").text('Loading...'); 
    var postData = new FormData(this); 
    var tags = // get your tags data here 

    // add tags to FormData 
    postData.append('tags', tags); 


    $.ajax({ 
     url: "snap-ajax.php",   
     type: "POST",    
     data: postData, 
     contentType: false,  
     cache: false,    
     processData: false,   
     success: function (data) 
     { 
      $(".errortext").text('OK'); 
     } 
    }); 
    } 
));