Как загрузить файл, используя jQuery.ajax и FormData

Question

Когда я использую XMLHttpRequest, файл правильно загружается с помощью FormData, Тем не менее, когда я переключаюсь на jQuery.ajax мой код ломается.

Это рабочий оригинальный код:

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?

Answer 1

Вы должны добавить processData:false,contentType:false к вашему методу, чтобы jQuery не изменял заголовки или данные (что нарушает ваш текущий код).

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
       }
    });
}  

Answer 2

Если вы загружаете из формы HTML5, которая включает входной файл типа fo, вы можете просто использовать 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>