Maison > Article > interface Web > 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
- WBOYoriginal
- 2016-05-16 15:51:061475parcourir
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 :
if (file.size > 1024 * 1024)
function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; if (fichier) {
var fileSize = 0; 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
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();
/// /// 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
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