использовать несколько атрибутов html5 для запуска нескольких отдельных загрузок

Question

Извините за запутанный заголовок.

У меня есть форма - form1, в которой есть один вход для файла (с несколькими атрибутами, чтобы пользователь мог выбрать несколько файлов). Форма не отправляется.

У меня есть другая форма - form2, в которой есть один файл ввода. нет атрибута mutiple.

Теперь через javascript я хотел бы получить каждый файл из fileinput из предыдущей формы, а затем назначить файл в поле ввода form2 и затем выполнить ajax submit. После завершения отправки ajax я хотел бы сделать то же самое для 2-го файла, а затем для 3-го файла и т. Д.

Я не хочу использовать flash или java-апплет. Я полностью осознаю, что IE не поддерживает множественные атрибуты Опера может использовать недопустимый атрибут min max, чтобы сделать то же самое.

Мой основной вопрос заключается в том, как извлечь файлы из поля ввода form1 и затем привязать его к полю form2.

Есть ли решение для этого? или сам мой подход неверен?

Чего я хочу достичь на стороне пользовательского интерфейса? Файл загружается, и сервер выполняет некоторую обработку и возвращает некоторые данные. так что я хочу, чтобы пользователь мог выбрать 10 файлов, но как только 1-й файл загружен, вывод получен.

Answer 1

Во-первых: моя идея неверна.Мы не можем присвоить значение через javascript для ввода с типом = file.

Я подумал о другой идее использования XMLHttpRequest.вот мой код:

<form id="new_picture_form" method="post" enctype="multipart/form-data" action="some url" accept-charset="UTF-8">
<input id="original_input" class="file_hidden" type="file" onchange="handleFiles(this.files);" name="picture[image][]" multiple="multiple">
</form>
<form id="fileinfo" method="post" enctype="multipart/form-data" action="some url">
</form>

<script type="text/javascript">
  function handleFiles(files)
  { 

    for (var i = 0; i < files.length; i++) {
   FileUpload(files[i])
  }
  }

  function FileUpload(file) {

var data = new FormData(document.getElementById("fileinfo"));
  var xhr = new XMLHttpRequest();
  this.xhr = xhr;


data.append('some field',"that you want to pass as param ")
data.append('type',"picture")
data.append("picture[image]", file);
  xhr.open("POST", "URL",true);
  xhr.send(data);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {

  eval(xhr.responseText) // basically the result from server contains some script
    }
  }


}


</script>