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

Question

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

我的问题：

如果我尝试上传文件而不是图像（jpg、gif、png），例如一个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>
}

Answer 1

发生的情况是，在您向控制器发送 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();
    }
}