Получите доступ к загрузке отдельных файлов с помощью XMLHttpRequest

Я использую XMLHttpRequest (с jQuery) для получения загрузки нескольких файлов. Добавив слушателя событий "прогресс" к объекту XMLHttpRequest, я могу получить event.loaded и event.total. Эти переменные дают мне загруженные и итоговые байты всех файлов, объединенных.

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

Я не думаю, что это даже необходимо, но вот мой код:

var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
    xhr.upload.addEventListener('progress', function(event) {
        var percent = 0;
        var position = event.loaded || event.position;
        var total = event.total;
        if (event.lengthComputable) {
            percent = Math.ceil(position / total * 100);
        }
        updateProgressBar(percent);
    }, false);
}
return xhr;

Если я смогу выполнить это с помощью XMLHttpRequest, это было бы здорово. Любая информация об этом будет оценена.

Ответ 1

Это то, что я использую,

$.ajax({
    xhr: function () {
        myXhr = $.ajaxSettings.xhr();
        myXhr.addEventListener('progress', function (e) { }, false);
        if (myXhr.upload) {
            myXhr.upload.onprogress = function (e) {
                var completed = 0;
                if (e.lengthComputable) {
                    var done = e.position || e.loaded,
                        total = e.totalSize || e.total;
                    completed = Math.round((done / total * 1000) / 10);
                }
                console.log(completed); // Displays the completed percentage
            }
        }
        return myXhr;
    }
});

Ответ 2

Вы можете использовать плагин Javascript Dropzone.js. Он обрабатывает файл один за другим, отображает индикатор выполнения для каждого файла, легко интегрируется, поддерживает мобильный, перетаскивая мышью,...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script>
<link rel="stylesheet" href="#" onclick="location.href='http://www.dropzonejs.com/css/dropzone.css'; return false;" />
<link rel="stylesheet" href="#" onclick="location.href='http://www.dropzonejs.com/css/style.css'; return false;" />

<form action="/page_where_upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>