MVC-4 FileUpload message de réussite

J'ai eu quelques problèmes avec l'affichage d'un message de réussite après l'envoi d'un fichier.

J'ai d'abord essayé d'utiliser ViewBag.Message, et cela fonctionne bien et affiche le message Succès après l'envoi du fichier, ce que je veux. Mais alors, je ne peux pas trouver un moyen sur la façon dont, après quelques secondes, modifiez ce message: "Choisissez un fichier à télécharger". , Afin que l'utilisateur comprenne qu'il peut maintenant télécharger un nouveau fichier.

J'ai essayé de mettre en place une fonctionnalité javascript pour traiter le message de réussite à la place. Le problème avec cela est que le message de réussite s'affiche avant que le téléchargement du fichier soit terminé, ce qui n'est pas bon, et s'il s'agit d'un très petit fichier, le message ne s'affichera que pendant une milliseconde.

Avez-vous une suggestion sur la façon de régler ce problème? Je ne suis pas sûr si je devrais essayer de travailler plus avant en utilisant javascript ou viewbag, ou quelque chose de différent?

Ce que je cherche, c'est un message de réussite qui s'affiche pendant environ 5 secondes après un chargement réussi, puis il revient à nouveau dans "Choisir un fichier pour charger un message".

Https://github.com/xoxotw/mvc_fileUploader

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading; using System.Web; using System.Web.Mvc; namespace Mvc_fileUploader.Controllers { public class HomeController : Controller { public ActionResult Index() { //ViewBag.Message = "Choose a file to upload !"; return View("FileUpload"); } [HttpPost] public ActionResult FileUpload(HttpPostedFileBase fileToUpload) { if (ModelState.IsValid) { if (fileToUpload != null && fileToUpload.ContentLength > (1024 * 1024 * 2000)) // 1MB limit { ModelState.AddModelError("fileToUpload", "Your file is to large. Maximum size allowed is 1MB !"); } else { string fileName = Path.GetFileName(fileToUpload.FileName); string directory = Server.MapPath("~/fileUploads/"); if (!Directory.Exists(directory)) { Directory.CreateDirectory(directory); } string path = Path.Combine(directory, fileName); fileToUpload.SaveAs(path); ModelState.Clear(); //ViewBag.Message = "File uploaded successfully !"; } } return View("FileUpload"); } public ActionResult About() { ViewBag.Message = "Your app description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } } }

Vue FileUpload:

 @{ ViewBag.Title = "FileUpload"; } <h2>FileUpload</h2> <h3>Upload a File:</h3> @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new {enctype = "multipart/form-data"})) { @Html.ValidationSummary(); <input type="file" name="fileToUpload" /><br /> <input type="submit" onclick="successMessage()" name="Submit" value="upload" /> //@ViewBag.Message <span id="sM">Choose a file to upload !</span> } <script> function successMessage() { x = document.getElementById("sM"); x.innerHTML = "File upload successful !"; } </script>

Quelques choses,

Tout d'abord, vous avez besoin d'un modèle pour indiquer un téléchargement réussi, nous pouvons simplement utiliser un bool dans votre instance pour l'indiquer.

Ajoutez ceci en haut de votre vue:

 @model bool

Ensuite, vous pouvez faire (en gardant votre vue telle quelle):

 @{ ViewBag.Title = "FileUpload"; } <h2>FileUpload</h2> <h3>Upload a File:</h3> @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new {enctype = "multipart/form-data"})) { @Html.ValidationSummary(); <input type="file" name="fileToUpload" /><br /> <input type="submit" onclick="successMessage()" name="Submit" value="upload" /> <span id="sM">Choose a file to upload !</span> }

Nous pouvons manipuler le sM dans JS en fonction de la valeur du modèle

 <script> @if(Model) { var x = document.getElementById("sM"); x.innerHTML = "File upload successful !"; setTimeout("revertSuccessMessage()", 5000); } function revertSuccessMessage() { var x = document.getElementById("sM"); x.innerHTML = "Choose a file to upload !"; } </script>

Ensuite, dans votre else déclaration dans votre méthode d'action, assurez-vous de revenir true sur le succès, sinon false . Ainsi

 else { string fileName = Path.GetFileName(fileToUpload.FileName); string directory = Server.MapPath("~/fileUploads/"); if (!Directory.Exists(directory)) { Directory.CreateDirectory(directory); } string path = Path.Combine(directory, fileName); fileToUpload.SaveAs(path); ModelState.Clear(); return View("FileUpload", true); } return View("FileUpload", false);

Vous pourriez faire ce qui suit:

 $('form').submit(function(e) { var form = $(this); if (form.valid()) { e.preventDefault(); $.ajax(form.attr('action'), { data: new FormData(form[0]), xhr: function() { var myXhr = $.ajaxSettings.xhr(); var progress = $('progress', form); if (myXhr.upload && progress.length > 0) { progress.show(); myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) progress.attr({ value: e.loaded, max: e.total }); }, false); } return myXhr; }, success: function(e) { alert('Upload complete!'); }, // Options to tell JQuery not to process data or worry about content-type contentType: false, processData: false }); } });

Cependant, cela ne fonctionnera que dans les navigateurs modernes. Vous pouvez utiliser Modernizr pour détecter cela. Par exemple, si vous enveloppez le code dans le gestionnaire d'événement de soumission du formulaire avec ce qui suit, il retournera à un envoi régulier s'il n'est pas pris en charge.

 if (Modernizr.input.multiple) { ... }

Cela prend également en charge l'indication du progrès. Il suffit de mettre une balise de progression dans le formulaire.

Le code ci-dessus indique simplement l'utilisateur lorsque le chargement est terminé. J'utilise une jolie petite bibliothèque appelée toastr à la place.

Peut-être que vous pourriez simplement utiliser l' alert() sur sa réussite? Pas la solution la plus élégante, mais ça me semble suffisant. Sinon, vous devriez consulter JQuery