Commentaire: Ci-dessous, nous utilisons la nouvelle API de fichiers de fonctionnalités de HTML 5 pour télécharger des fichiers et afficher le pourcentage de progrès de fichiers de téléchargement. L'intention est comme ceci: lorsqu'un fichier est sélectionné, les informations actuelles du fichier s'affichent.
Ici, nous combinons ASP.NET MVC en tant que serveur, et vous pouvez également utiliser d'autres langages de serveur. Regardons le HTML de cet extrait:@using (html.beginform ("upload", "home", formMethod.post, new {EncType = "multipart / form-data",}))
{
<div>
<étiquette pour = "fichier">
Télécharger l'image: </ label>
<input type = "file" multiple = "multiple" onchange = "fileselected ();" />
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<input type = "bouton" value = "upload image" />
</div>
<div>
</div>
}
Le JavaScript connexe est le suivant:
fonction FileSlected () {
var file = document.getElementById ('filetUplload'). fichiers [0];
if (fichier) {
var fileSize = 0;
if (file.size> 1024 * 1024)
FileSize = (math.round (file.size * 100 / (1024 * 1024)) / 100) .toString () + 'MB';
autre
fileSize = (math.round (file.size * 100/1024) / 100) .toString () + 'kb';
document.getElementById ('filename'). innerHtml = 'name:' + file.name;
document.getElementById ('FileSize'). innerHTML = 'Taille:' + Fichiers;
document.getElementById ('fileType'). innerHtml = 'type:' + file.type;
}
}
fonction uploadfile () {
var fd = new formData ();
FD.APPEND ("FileTouplload", document.getElementById ('filetUplload'). Files [0]);
var xhr = new xmlHttpRequest ();
xhr.upload.addeventListener ("Progress", uploadProgress, false);
xhr.adDeventListener ("Load", uploadComplete, false);
xhr.addeventListener ("erreur", uploadFailed, false);
xhr.AddeventListener ("AbOrt", uploadCanceled, false);
xhr.open ("post", "home / upload");
Xhr.Send (FD);
}
fonction uploadProgress (evt) {
if (evt.lengthcompautable) {
var %Complete = math.round (evt.loaded * 100 /evt.total);
document.getElementById ('ProgressNumber'). innerHtml = %Complete.ToString () + '%';
}
autre {
document.getElementById («ProgressNumber»). InnerHtml = «Impossible de calculer»;
}
}
fonction uploadComplete (evt) {
/ * Cet événement est soulevé lorsque le serveur renvoie une réponse * /
alert (evt.target.responsext);
}
fonction uploadFailed (evt) {
alert ("Il y a eu une erreur tentant de télécharger le fichier.");
}
fonction uploadCanceled (evt) {
Alert ("Le téléchargement a été annulé par l'utilisateur ou le navigateur a abandonné la connexion.");
}
Ce qui précède est le JavaScript natif, qui exécute la fonction de sélection de fichiers dans l'événement OnChange, et exécute la fonction de téléchargement dans le bouton Click. Ici, utilisez xmlhttpRequest pour implémenter le fichier de téléchargement ajax. Notez que le code peut fonctionner dans Firefox 14. IE 9 ne prend actuellement pas en charge l'API de fichiers, vous pouvez donc participer ici. Le code côté serveur est très simple:
classe publique HomeController: Contrôleur
{
Index d'action de l'action de public ()
{
return View ();
}
/// <résumé>
/// télécharge les fichiers spécifiés.
/// </summary>
/// <param> les fichiers. </ param>
/// <retourne> ActionResult </ returns>
[Httppost]
Public ActionResult Upload (HTTPPOSTEDFILEBASE [] FileTouplload)
{
foreach (fichier httpostedFileBase dans filetouplload)
{
String path = System.io.path.Chaute (server.mappath ("~ / app_data"), system.io.path.getFileName (file.filename));
file.saveas (chemin);
}
Viewbag.Message = "Fichier (S) Téléchargé avec succès";
return redirectToaction ("index");
}
}
Auteur: Petter Liu