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
Vous devez vous connecter pour publier un commentaire.
Comme indiqué dans https://stackoverflow.com/a/3694435/460368vous pouvez faire :
et
Il est ma solution: