Загружать несколько файлов по отдельности

Question

Я разрешаю пользователю загружать на мой сервер несколько SVG-файлов.

<form target="my_iframe" enctype="multipart/form-data"> 
    <input name="file" type="file" multiple> 
</form> 
<div id="message"></div> 

Однако некоторые пользователи захотят загрузить большое количество файлов. Сами файлы относительно малы (< 200 kB), но могут быть десятки, возможно, даже сто или около того.

Это займет много времени, чтобы загрузить и обработать. Если во время загрузки ничего не получится, нам придется начинать все заново.

Я видел веб-сайт с аналогичными проблемами (например, Facebook, SmugMug), загружая только один файл за раз.

Без плагинов (Sliverlight, Flash и т. Д.) Как я могу выбрать пользователя для одного файла, но сделать другой запрос для каждого? Я нацелен на IE9 +, Chrome и Firefox.

Что-то вроде

//DOES NOT WORK 
$.each($('input').files, function(file, i, files) { 
    $('input').files = [file]; //obviously flawed, since this is an Array, not a FileList 
    $('#message').text('Uploading ' + i + ' of ' + files.length); 
    $('form').submit(); 
}); 

(я слышал, как люди говорят, что это не работает, по соображениям безопасности, хотя я не понимаю, что я мог бы использовать делать, если я мог бы сократить FileList «с.)

Я думаю, что я мог бы использовать XHR для отправки данных с множественным кодированием, но если это правильное решение, я не понимаю, как это работает, и как его форматировать.

Я предполагаю, что это не необычная ситуация, но мои поиски оказались неожиданно маленькими.

Answer 1

Если вам не нужно поддерживать IE9 или ниже, а затем с помощью FormData вариант

var files = $('input').files; 

function upload(files, i){ 
    if(i >= files.length) { 
     $('#message').text('Done!'); 
     return; 
    } 

    $('#message').text('Uploading ' + (i+1) + ' of ' + files.length); 

    var file = files[i]; 
    var data = new FormData(); 
    data.append('file',data); 
    $.ajax({ 
     url:'/upload', 
     data:data, 
     contentType:false, 
     processData:false, 
     type:'POST', 
     success:function(){ 
      //handle success 
     }, 
     error:function(){ 
      //handle failure 
     }, 
     complete:function(){ 
      upload(files, i+1); 
     } 
    }); 
} 

upload(files); 

Answer 2

Вы всегда можете найти длину выбранных файлов и отправить их по AJAX по одному. Однако, в зависимости от того, как вы это реализуете, AJAX отправляет параллельные запросы. Из вашего вопроса неясно, ищете ли вы что-то, что будет загружать файлы по одному, поскольку каждый из них успешно загружен или если вы ищете параллельные загрузки, как я уже упоминал.

Но независимо от того, что вы выберете из двух, вы можете включить исключение или условие для проверки неудачных загрузок.

Это поможет, если вы внесете некоторый код.