MVC-4 文件上传成功消息

Posted 2023-02-22

【中文标题】MVC-4 文件上传成功消息

【英文标题】：MVC-4 FileUpload success message

【发布时间】：2013-05-15 23:47:10

【问题描述】：

我在上传文件后显示成功消息时遇到了一些问题。

我第一次尝试使用 ViewBag.Message ，它运行良好并在文件上传后显示成功消息，这正是我想要的。但是后来我找不到方法，几秒钟后将该消息更改回：“选择要上传的文件！” ，以便用户了解他现在可以上传新文件。

我尝试实现一个 javascript 功能来处理成功消息。这样做的问题是在文件上传完成之前显示成功消息，这不好，如果文件非常小，消息只会显示一毫秒。

你对我如何微调这个有什么建议吗？我不确定是否应该尝试使用 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();
        
    

文件上传视图：

@
    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>

【参考方案1】：

您可以执行以下操作：

$('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。

【参考方案2】：

几件事，

首先，您需要一个模型来表示上传成功，我们可以在您的实例中使用bool 来表示它。

在视图顶部添加：

@model bool

然后你可以做（​​保持你的观点不变）：

@
    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>

我们可以根据模型值在JS中操作sM

<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>

然后在您的操作方法中的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);

【讨论】：

谢谢，这很有帮助^_^

【参考方案3】：

也许您可以使用alert() 来表示成功？不是最优雅的解决方案，但听起来可能就足够了。否则，您应该查看JQuery