Barre de progression lors du téléchargement de fichiers volumineux avec XMLHttpRequest

Je suis en train d'uploader des gros fichiers sur le serveur à l'aide de XMLHttpRequest et fichier.la tranche.
J'ai gérer cela, avec l'aide de documentations et d'autres types de liens.
Depuis le téléchargement de fichiers volumineux est longuement travail, je tiens à fournir à l'utilisateur avec une barre de progression.
Après quelques lectures, je l'ai rencontré sur un exemple que, théoriquement, fait exactement ce dont j'ai besoin.
En prenant l'exemple de code et de l'adapter à mes besoins, j'ai atteint

var upload =
{
blobs: [],
pageName: '',
bytesPerChunk: 20 * 1024 * 1024,
currentChunk: 0,
loaded: 0,
total: 0,
file: null,
fileName: "",
uploadChunk: function (blob, fileName, fileType) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.responseText) {
//alert(xhr.responseText);
}
}
};
xhr.addEventListener("load", function (evt) {
$("#dvProgressPrcent").html("100%");
$get('dvProgress').style.width = '100%';
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100);
$("#dvProgressPrcent").html(progress + "%");
$get('dvProgress').style.width = progress + '%';
}
}, false);
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100);
$("#dvProgressPrcent").html(progress + "%");
$get('dvProgress').style.width = progress + '%';
}
}, false);
xhr.open('POST', upload.pageName, false);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", fileName);
xhr.setRequestHeader("X-File-Type", fileType);
xhr.send(blob);
},
upload: function (file) {
var start = 0;
var end = 0;
var size = file.size;
var date = new Date();
upload.fileName = date.format("dd.MM.yyyy_HH.mm.ss") + "_" + file.name;
upload.loaded = 0;
upload.total = file.size;
while (start < size) {
end = start + upload.bytesPerChunk;
if (end > size) {
end = size;
}
var blob = file.slice(start, end);
upload.uploadChunk(blob, upload.fileName, file.type);
start = end;
upload.loaded += start;
}
return upload.fileName;
}
};

L'appel, c'est comme (sans les validations)

upload.upload(document.getElementById("#upload").files[0]);

Mon problème est que le progrès de l'événement ne se déclenche pas.
J'ai essayé xhr.la méthode addEventListener et avec xhr.le téléchargement.la méthode addEventListener (l'un après l'autre et les deux à la fois) pour le progrès de l'événement, mais il n'a jamais déclencheurs. La onreadystatechange et de la charge des événements de déclenchement de l'amende juste.

Je serais très heureux d'aider avec ce que je fais de mal

mise à Jour
Après de nombreuses tentatives j'ai parviennent à simuler un progrès, mais j'ai couru dans un autre problème: google Chrome, l'INTERFACE utilisateur n'est pas mise à jour lors de l'upload.
Le code ressemble à ceci maintenant

var upload =
{
pageName: '',
bytesPerChunk: 20 * 1024 * 1024,
loaded: 0,
total: 0,
file: null,
fileName: "",
uploadFile: function () {
var size = upload.file.size;
if (upload.loaded > size) return;
var end = upload.loaded + upload.bytesPerChunk;
if (end > size) { end = size; }
var blob = upload.file.slice(upload.loaded, end);
var xhr = new XMLHttpRequest();
xhr.open('POST', upload.pageName, false);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", upload.fileName);
xhr.setRequestHeader("X-File-Type", upload.file.type);
xhr.send(blob);
upload.loaded += upload.bytesPerChunk;
setTimeout(upload.updateProgress, 100);
setTimeout(upload.uploadFile, 100);
},
upload: function (file) {
upload.file = file;
var date = new Date();
upload.fileName = date.format("dd.MM.yyyy_HH.mm.ss") + "_" + file.name;
upload.loaded = 0;
upload.total = file.size;
setTimeout(upload.uploadFile, 100);
return upload.fileName;
},
updateProgress: function () {
var progress = Math.ceil(((upload.loaded) / upload.total) * 100);
if (progress > 100) progress = 100;
$("#dvProgressPrcent").html(progress + "%");
$get('dvProgress').style.width = progress + '%';
}
};

mise à Jour 2
J'ai réussi à le résoudre et simuler une barre de progression qui fonctionne dans chrome aussi.
j'ai mis à jour exemple de code précédent avec celui qui fonctionne.
Vous pouvez faire la barre de "rafraîchir" le plus souvent par une réduction de la taille de la partie téléchargées en une fois
Tahnk vous pour votre aide

source d'informationauteur Cioby