如何使用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中文网其他相关文章！