C# MVC-4文件上载成功消息

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

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

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

你对我如何调整这个有什么建议吗？我不确定我是否应该尝试进一步使用javascript或viewbag，或其他不同的东西

我要找的是一条成功的消息，它在成功上传后显示大约5秒钟，然后再次变回“选择要上传的文件”状态

文件上载视图：

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

@{
ViewBag.Title=“FileUpload”；
}
文件上传
上载文件：
@使用（Html.BeginForm（“FileUpload”、“Home”、FormMethod.Post、new{enctype=“multipart/formdata”}））
{ 
@Html.ValidationSummary（）；


//@查看包。留言
选择要上载的文件！
}
函数successMessage（）
{
x=document.getElementById（“sM”）；
x、 innerHTML=“文件上传成功！”；
}

也许您可以使用

alert（）

来说明它的成功？这不是最优雅的解决方案，但听起来似乎已经足够了。否则，你应该研究一些事情

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

bool

来指示它

在视图顶部添加以下内容：

@model bool

然后您可以执行以下操作（保持视图不变）：

然后在动作方法中的

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
        });
    }
});

然而，它只能在现代浏览器中工作。您可以使用Modernizer来检测这一点。例如，如果在表单的submit事件处理程序中使用以下内容包装代码，则如果不支持，它将退回到常规提交

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

这也支持进度指示。只需在表单中添加一个进度标记

---

上面的代码只是在上传完成时提醒用户。我用了一个很好的小图书馆取而代之。

谢谢，这非常有用^_^

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
        });
    }
});

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