ドラッグ アンド ドロップを使用して FormData で AJAX ファイル アップロードを実装する方法

FormData を使用した AJAX ファイルのアップロード

問題:

ファイルのアップロードに FormData を使用するドラッグ アンド ドロップを使用して生成された動的 HTML を含む AJAX リクエスト機能。

HTML コード:

<form>

JavaScript コード:

$('.wpc_contact').submit(function(event) {
  var form = $('.wpc_contact').serialize();
  var formname = $('.wpc_contact').attr('name');
  var FormData = new FormData($(form)[1]);

  $.ajax({
    url: '<?php echo plugins_url(); ?>/wpc-contact-form/resources/js/tinymce.php',
    data: { form: form, formname: formname, FormData: FormData },
    type: 'POST',
    processData: false,
    contentType: false,
    success: function(data) {
      alert(data);
    }
  });
});

解決策:

FormData を正しく使用するには、次に従ってください手順:

1.準備:

• 標準 JavaScript オブジェクト 'form' を使用してフォーム全体を FormData() に渡します:

  var form = $('form')[0];
  var formData = new FormData(form);

• または、特定のデータを指定して、 FormData():

  var formData = new FormData();
  formData.append('file', $('input[type=file]')[0].files[0]);

2.フォームの送信:

次のオプションを指定して jQuery AJAX リクエストを使用します:

$.ajax({
  url: 'Your url here',
  data: formData,
  type: 'POST',
  contentType: false, // Required
  processData: false, // Required
  // ... Other options like success, etc.
});

注:

• 「POST」と入力しますすべてのファイルは POST 経由で送信する必要があるため、オプションの「」が必要ですrequest.
• contentType: false は、jQuery バージョン 1.6 以降でのみ使用できます。

以上がドラッグ アンド ドロップを使用して FormData で AJAX ファイル アップロードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。