Code d'implémentation pour afficher la progression du téléchargement HTML5 files_html5 compétences du didacticiel

fileSize = (Math.round(file.size * 100 / (1024 * 1024) )) / 100).toString () 'Mo';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() 'KB'; .getElementById('fileName') .innerHTML = 'Nom : ' file.name;
document.getElementById('fileSize').innerHTML = 'Size : ' fileSize
document.getElementById('fileType'). innerHTML = 'Type : ' file .type;
}
}
function uploadFile() {
var fd = new FormData(); getElementById('fileToUpload'). files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false
xhr.addEventListener("); load", uploadComplete, false) ;
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST" , "Accueil/Téléchargement") ;
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round (evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() '%'
}
else {
document.getElementById; ('progressNumber').innerHTML = 'unable to calculate';
}
}
function uploadComplete(evt) {
/* Cet événement est déclenché lorsque le serveur renvoie une réponse */
alert(evt.target .responseText);
}
function uploadFailed(evt) {
alert("Une erreur s'est produite lors de la tentative de téléchargement du fichier."
}
function uploadCanceled(evt) {
alert("Le téléchargement a été annulé par l'utilisateur ou le navigateur a interrompu la connexion.");
}


Ce qui précède est la fonction Javascript native. qui exécute fileSelected dans l'événement onchange, après avoir cliqué sur le bouton, la fonction uploadFile est exécutée Ici, XMLHttpRequest est utilisé pour implémenter le téléchargement de fichiers ajax. Notez que le code fonctionnera dans Firefox 14, IE 9 ne prend actuellement pas en charge l'API de fichier, vous pouvez participer ici. Le code côté serveur est très simple :





Copiez le code

/// Les fichiers. ;returns>ActionResult[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
{
foreach (fichier HttpPostedFileBase dans fileToUpload)
{
string path = System.IO.Path.Combine (Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path); ViewBag.Message = "Fichier(s) téléchargé(s) avec succès";
return RedirectToAction("Index");
}
}


Auteur : Petter Liu