드래그 앤 드롭을 사용하여 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 요청을 통해 전송되어야 하므로 옵션에 "가 필요합니다.
• contentType: false는 jQuery 버전 1.6 이상에서만 사용할 수 있습니다.

위 내용은 드래그 앤 드롭을 사용하여 FormData로 AJAX 파일 업로드를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!