recherche

Maison >interface Web >Tutoriel H5 >Code d'implémentation pour afficher la progression du téléchargement HTML5 files_html5 compétences du didacticiel

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

WBOY
WBOYoriginal
2016-05-16 15:51:061542parcourir

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"}))
{

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
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment écrire une déclaration HTML5 indiquant qu'elle est compatible avec les compétences du didacticiel IE_html5Article suivant：Comment écrire une déclaration HTML5 indiquant qu'elle est compatible avec les compétences du didacticiel IE_html5

Articles Liés

Voir plus