Почему не работает загрузка файлов?

Question

[Extramezz]

Разметка:

<form action="/ok.php" method="POST" name="mainContactForm" enctype="multipart/form-data">
  <input type="file" multiple name="fileLoader[]"> 
</form>

Если выбрать несколько файлов и отправить форму - сервер все их получит, все как надо. Но задача - реализовать это дело через JS. Накопал такой вариант:

document.forms.mainContactForm.onsubmit = function(e){
   e.preventDefault();  

   var f = new FormData( this ), xhr = new XMLHttpRequest();
    
    xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
		alert( xhr.responseText );
	}
     }

     xhr.open("POST", "ok.php", true);
     xhr.send(f);
 }

По всем показаниям, до сервера доходит только один из файлов. Будто бы у fileLoader установлено name="fileLoader" (без []).

Чего делать? Есть еще варианты реализации подобного действа?

Answer 1

[Сергей Жубартович]

Делал подобное для ajax отправки файлов на jquery

var formData = new FormData();
  $(this).children('input').each(function() {
    formData.append($(this).attr('name'), $(this).val());
  });
  
  if ( $(this).find('#file').length ) {
    $.each($(this).find('#file')[0].files, function(i, file) {
      formData.append('file-'+i, file);
    });
  }

Ну и после в ajax запросе data: formData

Answer 2

[trushka]

Можно форму в скрытый фрейм отправлять, указав его name в качесве target'a формы. На onload ему повесить обработчик, чтоб читал его содержимое с ответом, если надо