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

Ici, nous combinons Asp.net MVC comme serveur, vous pouvez également utiliser d'autres langages de serveur. Regardons le HTML de ce fragment :

Copiez le code

Le code est le suivant :

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"}))
{

Télécharger l'image : id="fileToUpload " multiple="multiple" onchange="fileSelected();" />

"row"> ;

">

}


Le Javascript associé ressemble à ceci :

Copier code

Le code est le suivant :

function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; if (fichier) {

var fileSize = 0;

if (file.size > 1024 * 1024)

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

Le code est le suivant :

classe publique HomeController : Contrôleur { public ActionResult Index() { return View();

///

/// Télécharge les fichiers spécifiés .

///

/// 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