Как загрузить файл на сервер через Ajax?

Question

[Артём Митрофанов]

Есть функция, которая вызывается после выбора файла в input file и отправляет файл на сервер. Но прицепить файл к отправке не получается - отправляется пустой запрос.

var $fileCover = $('.editCover input[type=file]');

$fileCover.change(function(event) {  
  event.stopPropagation(); 
  event.preventDefault(); 

  formData = new FormData($fileCover[0].files);  // Код не добавляет файл в данные к отправке
  
  $.ajax({
            url: './CoverUpdate.php?uploadfiles',
            type: 'POST',
            data: formData,
            cache: false,
            dataType: 'json',
            processData: false, 
            contentType: false, 
            success: { // ответ сервера }
  });
  return false;
});

Answer 1

[Владимир]

вот это не правильно - formData = new FormData($fileCover[0].files); // Код не добавляет файл в данные к отправке
надо так писать formData = new FormData($fileCover[0].files[0]); // Код не добавляет файл в данные к отправке

Answer 2

[Петр]

Для такой задачи лучше использовать XMLHttpRequest
Пример:

var form = av.closest('form')[0];
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(form.method, form.action, true);
xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4){
                if (xmlhttp.status == 200){
                    xmlhttp.responseText;
                } else {
                    // empty
                }
            }
        };
xmlhttp.send(new FormData(form));

Answer 3

[Александр Мельниченко]

Я так делаю.

<form method="post" enctype="multipart/form-data" target="iframe-upload" action="/ajax/upload_attach_file" id="form_upload">
				<input type="file" name="file">
			</form>
<iframe style="display: none; border:0" src="#" name="iframe-upload"></iframe>

$(document).on('change', 'input[type=file]', function() {
			$('#form_upload').submit();
})

Атрибут формы "target" отвечает за фрейм который будет грузить форму на сервер

Answer 4

[Евгений]

Через XMLHttpRequest будет работать
true-coder.ru/php/ispolzovanie-obekta-formdata-dly...