AJAXを使用してHTMLでいるFormDataを持つマルチパートフォームを介してデータやファイルを送信します

DINOLIN YP JOB：

以下のコードでは、私がデータを転送することができるが、私は、転送ファイルとデータへの機能の追加]を使用する場合、それは働いていません。誰かがどのようにアップロードからファイルを転送するには教えてもらえますか？いくつかの助けを楽しみにしています

$(document).ready(function() {
  var loader = '<img src="../assets/media/loader.gif" />';

  $('#submit').click(function() {
    confirm("Do you really want to send messages?");
    $('.loading').html(loader).fadeIn();

    var msg_area_cst = $('textarea[name=msg_area_cst]').val();
    var num_cst = $('textarea[name=num_cst]').val();

    var form_data = new FormData();
    form_data = 'msg_area_cst=' + msg_area_cst + '&num_cst=' + num_cst;
    form_data.append('upload', $('input[name=upload]'));

    $.ajax({
      url: "../server/CustomMsg.php",
      type: "POST",
      data: form_data,
      success: function(html) {
        if (html == 1) {
          $('#register_form').fadeOut('slow');
          $('.loading').fadeOut();
          $('.message').html('Successfully Sent ! ').fadeIn('slow');
        } else 
          alert('Sorry, unexpected error. Please try again later.');
      }
    });
  });
});

ロリーMcCrossan：

問題は、あなたが正しく宣言しているためであるFormDataオブジェクトを、その後、次の行に文字列を使用して、すぐにそれを上書きします。

あなたはする必要がありappend() 、すべてのいるFormDataオブジェクトへのデータ。また、あなたはにファイルデータを提供する必要がappend()方法ではなく、参照するjQueryオブジェクトinput type="file"コントロールを。

var form_data = new FormData();
form_data.append('msg_area_cst', msg_area_cst);
form_data.append('num_cst', num_cst);
form_data.append('upload', $('input[name=upload]')[0].files[0]);

ことでは、あなたがから値を読んでいるコントロールがに含まれている場合は、このはるかにシンプルに作ることができる、と述べたform要素。次に、あなたが使用することができsubmit、そのフォームのイベントをしているFormDataコンストラクタにそれへの参照を渡します。

また、あなたは結果を何もしないconfirm()、私はあなたがあればフォームの送信を停止するとしCancel、今使用していた上記の例で、クリックされましたpreventDefault()。

最後に、使用してはhtml == 1非常に信頼性がありません。まずhtml整数に暗黙的型変換に頼ることは理想的ではないので、文字列になります。含まれるすべての空白があります場合にも、プレーンテキストの応答を返すことは問題を引き起こす可能性があります。私は強く、あなたのサーバー側のロジックは、JSONとしてシリアライズ形式を返し、「成功」フラグのためのブール値を使用するように変更することをお勧めしたいです。

言ったことすべてで、これを試してみてください。

$('#yourForm').on('submit', function(e) {
  if (!confirm("Do you really want to send messages?")) {
    e.preventDefault();
  }
  
  $('.loading').html(loader).fadeIn();

  $.ajax({
    url: "../server/CustomMsg.php",
    type: "POST",
    data: new FormData(this),
    success: function(html) {
      if (html.trim() === "1") {
        $('#register_form').fadeOut('slow');
        $('.loading').fadeOut();
        $('.message').html('Successfully Sent ! ').fadeIn('slow');
      } else
        alert('Sorry, unexpected error. Please try again later.');
      }
    }
  });
});