在 ASP.NET MVC 中的上传文件中使用 TempData

Using TempData in Upload Files in ASP.NET MVC

我在我的项目 MVC 中实现了一个上传文件的表单 asp net c#

我的问题:

如果我尝试上传文件而不是图像(jpg、gif、png),例如window 弹出窗口中的 return 是

的 txt 文件
Please upload only image (jpg,gif,png)

但数据表已清空其他已存储的数据。

不可能警告用户只接受图像文件并保留已存储在表单中的数据?

如何解决这个问题?

下面是我的代码

控制器

[HttpPost]
public ActionResult Index(PersonModel person, HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        var fileName = System.IO.Path.GetFileNameWithoutExtension(file.FileName);
        var fileExtension = System.IO.Path.GetExtension(file.FileName);

        if (fileExtension.ToString() == ".jpeg" ||
                    fileExtension.ToString() == ".jpg" ||
                    fileExtension.ToString() == ".gif" ||
                    fileExtension.ToString() == ".png")
        {
            fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + fileName.Trim() + fileExtension;
            var userfolderpath = System.IO.Path.Combine(Server.MapPath("~/UploadedFiles/"), fileName);
            file.SaveAs(userfolderpath);                    
            TempData["Message"] = "Ok";
            return RedirectToAction("Index");
        }
        else
        {
            TempData["Message"] = "Please upload only image (jpg,gif,png)";
        }
    }
}

查看

@if (TempData["Message"] != null)
{
    <script type="text/javascript">
                window.onload = function () {
                    alert("@TempData["Message"].ToString()");
        };
    </script>
}

发生的事情是,在您 POST 到控制器之后,呈现了一个新页面,其中不包括原始上传文件选择。

处理此问题的最简单方法是使用一些简单的 Javascript 检查客户端上的文件名,并且仅在有效时才提交表单。

var fullPath = document.getElementById('upload').value;
if (fullPath) {
    var startIndex = (fullPath.indexOf('\') >= 0 ? fullPath.lastIndexOf('\') : 
    fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\') === 0 || filename.indexOf('/') === 0) {
    filename = filename.substring(1);
}
    // Check the filename here and then submit the form if valid
    if (!filename.includes(".jpg") && !filename.includes(".gif"))
    {
         // display error
    }
    else
    {
        document.getElementById("myForm").submit();
    }
}