MVC-4文件上传成功消息 [英] MVC-4 FileUpload success message
问题描述
我有一个文件已被上传后显示成功的消息几个问题。
我第一次尝试使用该ViewBag.Message，和它的作品很好，该文件已被上传后，这是我想要的显示成功的消息。但后来我找不到如何，几秒钟后更改消息回道：请选择要上传的文件 ，使用户知道他现在可以上传一个新的文件。
我试图执行一个JavaScript功能来处理成功的消息，而不是。但问题是，成功的消息，然后将文件上传完成，这是没有好之前出现，而如果它是一个非常小的文件，该消息将只显示了一毫秒。
你对我怎么可以微调这个什么建议吗？林不知道我是否应该进一步尝试利用工作JavaScript或viewbag，或不同的东西？
我所寻找的是一个成功的消息，上传成功后是大约5秒显示，它再变回选择要上传的文件信息一次。
https://github.com/xoxotw/mvc_fileUploader
使用系统;
使用System.Collections.Generic;
使用System.IO;
使用System.Linq的;
使用的System.Threading;
使用的System.Web;
使用System.Web.Mvc;命名空间Mvc_fileUploader.Controllers
{
公共类HomeController的：控制器
{
公众的ActionResult指数（）
{
//ViewBag.Message =选择要上传的文件！
返回视图（文件上传）;
} [HttpPost]
公众的ActionResult文件上传（HttpPostedFileBase fileToUpload）
{ 如果（ModelState.IsValid）
{
如果（fileToUpload = NULL＆放大器;！＆安培; fileToUpload.ContentLength＆GT;（1024 * 1024 * 2000））// 1MB限制
{
ModelState.AddModelError（fileToUpload，你的文件是大允许的最大值为1MB。！）;
} 其他
{
字符串文件名= Path.GetFileName（fileToUpload.FileName）;
串目录=使用Server.Mappath（〜/文件上传/）; 如果（！Directory.Exists（目录））
{
Directory.CreateDirectory（目录）;
} 字符串路径= Path.Combine（目录，文件名）;
fileToUpload.SaveAs（路径）; ModelState.Clear（）;
//ViewBag.Message =文件上传成功！ }
} 返回视图（文件上传）; } 公众的ActionResult关于（）
{
ViewBag.Message =你的应用描述页面。 返回查看（）;
} 公众的ActionResult联系（）
{
ViewBag.Message =您的联系页面。 返回查看（）;
}
}
}
文件上传的看法：
@ {
ViewBag.Title =文件上传;
}＆LT; H2＆GT;的FileUpload＆LT; / H＆GT;＆LT; H3＆GT;上传文件：其中; / H3 GT＆;
@using（Html.BeginForm（文件上传，家，FormMethod.Post，新{ENCTYPE =的multipart / form-data的}））
{
@ Html.ValidationSummary（）;
＆LT;输入类型=文件名称=fileToUpload/＆GT;＆LT; BR /＆GT;
＆LT;输入类型=提交的onclick =successMessage（）NAME =提交值=上传/＆GT;
//@ViewBag.Message
＆LT;跨度ID =SM＆GT;选择要上传的文件＆LT;！/ SPAN＆GT;
}
＆LT;脚本＆GT;
功能successMessage（）
{
X =的document.getElementById（SM）;
x.innerHTML =文件上传成功！;
}
＆LT; / SCRIPT＆GT;
几样东西，
首先，你需要一个模型表明上传成功，我们可以只使用一个布尔在您的实例，以表明它。
在您的视图的顶部加入这样的：
@model布尔
然后你可以做（让你的视图是）：
@ {
ViewBag.Title =文件上传;
}＆LT; H2＆GT;的FileUpload＆LT; / H＆GT;＆LT; H3＆GT;上传文件：其中; / H3 GT＆;@using（Html.BeginForm（文件上传，家，FormMethod.Post，新{ENCTYPE =的multipart / form-data的}））
{
@ Html.ValidationSummary（）;
＆LT;输入类型=文件名称=fileToUpload/＆GT;＆LT; BR /＆GT;
＆LT;输入类型=提交的onclick =successMessage（）NAME =提交值=上传/＆GT; ＆LT;跨度ID =SM＆GT;选择要上传的文件＆LT;！/ SPAN＆GT;
}
我们可以操作取决于模型值 SM 在JS
＆LT;脚本＆GT; @if（型号）
{
变种X =的document.getElementById（SM）;
x.innerHTML =文件上传成功！;
的setTimeout（revertSuccessMessage（），5000）;
} 功能revertSuccessMessage（）
{
变种X =的document.getElementById（SM）;
x.innerHTML =选择要上传的文件！
}
＆LT; / SCRIPT＆GT;
然后在动作方法的其他语句，只需确保您返回真正成功，否则假。像这样
其他
{
字符串文件名= Path.GetFileName（fileToUpload.FileName）;
串目录=使用Server.Mappath（〜/文件上传/）; 如果（！Directory.Exists（目录））
{
Directory.CreateDirectory（目录）;
} 字符串路径= Path.Combine（目录，文件名）;
fileToUpload.SaveAs（路径）; ModelState.Clear（）; 返回视图（文件上传，真正的）;
}返回视图（文件上传，FALSE）;
I am having few problems with displaying a success message after a file has been uploaded.
I first tried with using the ViewBag.Message , and it works good and display the Success message after the file has been uploaded, which is what I want. But then I cant find a way on how to , after a few seconds change that message back to: "Choose a file to upload !" , so that the user understand he can now upload a new file.
I tried to implement a javascript feature to handle the success message instead. The problem with that is that the success message then shows up before the file upload is completed, which is no good, and if its a very small file, the message will only show for a millisecond.
Do you have any suggestion on how I can fine tune this ? Im not sure if I should try work further using javascript or viewbag, or something different ?
What I am looking for is a success message that are display for around 5 seconds after a successful upload, it then changes back to the "Choose a file to upload message" again.
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 view:
@{
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>
Few things,
First, you need a Model to indicate a successful upload, we can just use a bool in your instance to indicate it.
Add this at the top of your view:
@model bool
Then you can do (keeping your view as is):
@{
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>
}
We can manipulate the sM in JS dependent upon the model value
<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>
Then in your else statement in your action method, just make sure you return true on success, otherwise false. Like so
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);
这篇关于MVC-4文件上传成功消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
