jQuery.ajax 및 FormData를 사용하여 파일을 업로드하는 방법

jQuery.ajax 및 FormData를 사용하여 파일을 업로드하는 방법

XMLHttpRequest를 사용하면 파일을 사용하여 올바르게 업로드 할 수 있습니다.단, 로 전환하면 코드가 깨집니다.

동작하고 있는 원래의 코드는 다음과 같습니다.

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.send(fd);
}

이것이 나의 실패작이다.jQuery.ajax시도:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url: "upload.php",
        type: "POST",
        data: fd,
    });
}

내가 뭘 잘못하고 있지?AJAX를 사용하여 파일을 올바르게 업로드하려면 어떻게 해야 하나요?

를 추가해야 합니다.processData:false,contentType:falsejQuery가 헤더 또는 데이터를 변경하지 않도록(현재 코드가 깨짐) 합니다.

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           // .. do something
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
}  

입력 fo 타입 파일을 포함한 HTML5 폼에서 업로드 하는 경우 querySelector와 FormData를 사용하면 동작합니다.

php의 경우 $_FILE 내의 모든 파일과 $_POST 배열 내의 다른 모든 입력을 제공합니다.

JS/jQuery:

function safeFormWithFile()
{
  var fd = new FormData(document.querySelector('#myFormName'));

  $.ajax({
        url:'/catchFormData.php',
        method:'POST',
        data:fd,
        processData: false,
        contentType: false,
        success:function(data){
          console.log(data);
        }
  });
}

HTML:

<form id="myFormName">
  <input id="myImage" name="myImage" type="file">
  <input id="myCaption" name="myCaption" type="text">
</form>

언급URL : https://stackoverflow.com/questions/9622901/how-to-upload-a-file-using-jquery-ajax-and-formdata