javascript - ejemplo - xmlhttprequest readystate

Obtenga el progreso de carga de archivos individuales con XMLHttpRequest

Question

Estoy usando XMLHttpRequest (con jQuery) para obtener el progreso de carga de varios archivos. Al agregar un detector de eventos "progress" al objeto XMLHttpRequest, puedo obtener event.loaded y event.total . Esas variables me dan los bytes cargados y totales de todos los archivos combinados.

Lo que me gustaría hacer es obtener el progreso de cada archivo individual, pero por lo que veo, esa información no está disponible con XMLHttpRequest. ¿Es eso cierto?

No creo que esto sea necesario, pero aquí está mi código:

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;

Si puedo lograr esto con XMLHttpRequest eso sería genial. Cualquier información sobre esto se agradecerá.

Answer 1

Esto es lo que uso,

$.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;
    }
});

Answer 2

Puede usar el complemento de Javascript Dropzone.js . Él maneja el archivo uno por uno, muestra la barra de progreso para cada archivo, fácil de integrar, soporte móvil, arrastrar y soltar, ...

<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="http://www.dropzonejs.com/css/dropzone.css" />
<link rel="stylesheet" href="http://www.dropzonejs.com/css/style.css" />

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

Si intenta ejecutar el fragmento, obtendrá un error del servidor porque page_where_upload no existe.