MVC-4 FileUpload成功消息
在上传文件后显示成功消息时遇到的问题很少。
我首先尝试使用ViewBag.Message，它运行良好，并在文件上传后显示Success消息，这就是我想要的。 但是后来我几乎找不到怎样的方法，几秒钟之后将该消息改回：“选择要上传的文件！” ，以便用户了解他现在可以上传新文件。
我试图实现一个javascriptfunction来代替处理成功消息。 问题在于成功消息然后在文件上载完成之前显示，这是不好的，如果它是一个非常小的文件，消息将只显示一毫秒。
你对我如何微调这个有什么建议吗？ 我不确定我是否应该尝试使用javascript或viewbag或其他不同的东西？
我正在寻找的是成功上传后大约5秒钟显示的成功消息，然后再次更改回“选择要上传的文件”。
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(); } } } FileUpload视图：
@{ ViewBag.Title = "FileUpload"; } FileUpload
Upload a File:
@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new {enctype = "multipart/form-data"})) { @Html.ValidationSummary();
//@ViewBag.Message Choose a file to upload ! } function successMessage() { x = document.getElementById("sM"); x.innerHTML = "File upload successful !"; }
一些事情，
首先，您需要一个模型来指示成功上传，我们可以在您的实例中使用bool来指示它。
在视图顶部添加：
@model bool
然后你可以做（保持你的观点）：
@{ ViewBag.Title = "FileUpload"; } FileUpload
Upload a File:
@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new {enctype = "multipart/form-data"})) { @Html.ValidationSummary();
Choose a file to upload ! }
我们可以根据模型值来操纵JS中的sM
然后在你的action方法的else语句中，确保在成功时返回true ，否则返回false 。 像这样
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);
您可以执行以下操作：
$('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 }); } });
但它只适用于现代浏览器。 您可以使用Modernizr来检测它。 例如，如果使用以下内容将表单中的代码包装在表单的提交事件处理程序中，则如果不支持，则它将回退到常规提交。
if (Modernizr.input.multiple) { ... }
这也支持进度指示。 只需在表单中添加进度标记即可。
上述代码只是在上传完成时向用户发出警报。 我使用了一个名为toastr的漂亮的小库。
也许你可以使用alert()来取得成功吗？ 不是最优雅的解决方案，但听起来似乎已经足够了。 否则，你应该研究JQuery