Загрузка нескольких файлов HTML5: загрузка по одному через AJAX

Чтобы это была синхронная операция, вам нужно начать новую передачу, когда будет выполнена последняя. Gmail, например, отправляет все сразу, одновременно. Событие для хода загрузки файла AJAX — progress или onprogress для необработанного экземпляра XmlHttpRequest.

Итак, после каждого $.ajax() на стороне сервера (я не знаю, что вы будете использовать) отправьте ответ JSON для выполнения AJAX при следующем вводе. Одним из вариантов было бы привязать элемент AJAX к каждому элементу, чтобы упростить задачу, чтобы вы могли просто сделать это в success $(this).sibling('input').execute_ajax().

Что-то вроде этого:

$('input[type="file"]').on('ajax', function(){
  var $this = $(this);
  $.ajax({
    'type':'POST',
    'data': (new FormData()).append('file', this.files[0]),
    'contentType': false,
    'processData': false,
    'xhr': function() {  
       var xhr = $.ajaxSettings.xhr();
       if(xhr.upload){ 
         xhr.upload.addEventListener('progress', progressbar, false);
       }
       return xhr;
     },
    'success': function(){
       $this.siblings('input[type="file"]:eq(0)').trigger('ajax');
       $this.remove(); // remove the field so the next call won't resend the same field
    }
  });
}).trigger('ajax');  // Execute only the first input[multiple] AJAX, we aren't using $.each

Приведенный выше код будет для нескольких <input type="file">, но не для <input type="file" multiple>, в этом случае он должен быть:

var count = 0;

$('input[type="file"]').on('ajax', function(){
  var $this = $(this);
  if (typeof this.files[count] === 'undefined') { return false; }

  $.ajax({
    'type':'POST',
    'data': (new FormData()).append('file', this.files[count]),
    'contentType': false,
    'processData': false,
    'xhr': function() {  
       var xhr = $.ajaxSettings.xhr();
       if(xhr.upload){ 
         xhr.upload.addEventListener('progress', progressbar, false);
       }
       return xhr;
     },
    'success': function(){
       count++;
       $this.trigger('ajax');
    }
  });
}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each 

Похоже, это очень хороший учебник, именно то, что вам нужно .

При этом загрузка через vanilla ajax поддерживается не во всех браузерах, и я бы по-прежнему рекомендовал использовать файл iframe. (IE динамически создает iframe и размещает его с помощью javascript)

Я всегда использовал этот сценарий и считаю его очень кратким. Если вы хотите узнать, как загружать через создание iframe, вам следует изучить его источник.

Надеюсь, поможет :)

Дополнительное редактирование

Чтобы создать индикаторы выполнения с помощью метода iframe, вам нужно будет выполнить некоторую работу на стороне сервера. Если вы используете php, вы можете использовать:

• Прогресс загрузки сеанса для php5.4+
• Загрузить пакет выполнения для php‹5.4

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

Все они работают одинаково — каждая загрузка имеет UID, вы будете запрашивать «прогресс», связанный с этим идентификатором, через согласованные промежутки времени через ajax. Это вернет ход загрузки, определенный сервером.

Я столкнулся с той же проблемой и пришел с этим решением. Я просто извлекаю форму с помощью multipart, а при рекурсивном вызове (файл за файлом) запускаю запрос ajax, который вызывается только после завершения.

var form = document.getElementById( "uploadForm" );
var fileSelect = document.getElementById( "photos" );
var uploadDiv = document.getElementById( "uploads" );

form.onsubmit = function( event ) {
    event.preventDefault(  );

    var files = fileSelect.files;
    handleFile( files, 0 );
};

function handleFile( files, index ) {
    if( files.length > index ) {
        var formData = new FormData(  );
        var request = new XMLHttpRequest(  );

        formData.append( 'photo', files[ index ] );
        formData.append( 'serial', index );
        formData.append( 'upload_submit', true );

        request.open( 'POST', 'scripts/upload_script.php', true );
        request.onload = function(  ) {
            if ( request.status === 200 ) {
                console.log( "Uploaded" );
                uploadDiv.innerHTML += files[ index ].name + "<br>";
                handleFile( files, ++index );
            } else {
                console.log( "Error" );
            }
        };
        request.send( formData );
    }
}

Используя этот исходный код, вы можете загружать несколько файлов, таких как Google, один за другим через ajax. Также вы можете видеть процесс загрузки

HTML

 <input type="file" id="multiupload" name="uploadFiledd[]" multiple >
 <button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
 <div id="uploadsts"></div>

JavaScript

<script>

function uploadajax(ttl,cl){

var fileList = $('#multiupload').prop("files");
$('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

var form_data =  "";

form_data = new FormData();
form_data.append("upload_image", fileList[cl]);


var request = $.ajax({
          url: "upload.php",
          cache: false,
          contentType: false,
          processData: false,
          async: true,
          data: form_data,
          type: 'POST', 
          xhr: function() {  
      var xhr = $.ajaxSettings.xhr();
      if(xhr.upload){ 
        xhr.upload.addEventListener('progress', function(event){
                        var percent = 0;
                        if (event.lengthComputable) {
                            percent = Math.ceil(event.loaded / event.total * 100);
                        }
                        $('#prog'+cl).text(percent+'%')

                    }, false);
       }
      return xhr;
     }    
      })
      .success(function(res,status) {

        if(status == 'success'){

            percent = 0;
            $('#prog'+cl).text('');            

                $('#prog'+cl).text('--Success: ');

            if(cl < ttl){
                uploadajax(ttl,cl+1);
            }else{
               alert('Done ');

            }     

            }

      })
      .fail(function(res) {
      alert('Failed');
      });

}



$('#upcvr').click(function(){

var fileList = $('#multiupload').prop("files");
$('#uploadsts').html('');
var i
for ( i = 0; i < fileList.length; i++) {
$('#uploadsts').append('<p class="upload-page">'+fileList[i].name+'<span class="loading-prep" id="prog'+i+'"></span></p>');
if(i == fileList.length-1){
    uploadajax(fileList.length-1,0);
}
}

});

</script>

PHP

upload.php
    move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);

HTML-код

<div class="row">
    <form id="singleUploadForm" name="singleUploadForm" style="float: right; padding-right: 25px">
        <input style="float: left;" id="singleFileUploadInput" type="file" name="files" class="file-input btn btn-default" required multiple/>
        <button style="float: left" type="submit" class="btn .btn-primary">Upload</button>
    </form>
</div>

Код JavaScript

$('#mutipleUploadForm').submit(function (event) {
    var formElement = this;
    var formData = new FormData(formElement);
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/uploadFile",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            alert("Image Uploaded Successfully");

            location.reload();
        },
        error: function (error) {
            console.log(error);
            // process error
        }
    });
    event.preventDefault();
});

Класс контроллера Spring

@PostMapping("/uploadFile")
@ResponseBody
public boolean uploadMutipleFiles(@RequestParam("file") MultipartFile[] file) {
    List<Boolean> uploadStatusList = new ArrayList<>();
    for (MultipartFile f : file) {
        uploadStatusList.add(uploadFile(f));
    }
    return !uploadStatusList.contains(false);
}

public boolean uploadFile(@RequestParam("file") MultipartFile file) {
    boolean uploadStatus = galleryService.storeFile(file);
    return uploadStatus;
}

Весенний класс обслуживания

public boolean storeFile(MultipartFile file) {
    boolean uploadStatus = false;
    try {
        String fileName = file.getOriginalFilename();
        InputStream is = file.getInputStream();
        Files.copy(is, Paths.get(imagesDirectory + fileName), StandardCopyOption.REPLACE_EXISTING);
        System.out.println("File store success");
        uploadStatus = true;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return uploadStatus;
}