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

Question

我已經實現了在我的項目 MVC asp net c# 中上傳文件的形式

我的問題：

如果我嘗試上傳文件而不是圖像（jpg，gif，png），例如 txt 文件，則 window 彈出窗口中的返回是

Please upload only image (jpg,gif,png)

但數據表單中已存儲的其他數據被清空。

無法警告用戶只接受圖像文件並保留已存儲在表單中的數據？

如何解決這個問題？

我的代碼如下

controller

[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

發生的情況是，在您向 Controller 發布后，會呈現一個新頁面，其中不包括原始上傳文件選擇。

處理此問題的最簡單方法是使用一些簡單的 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();
    }
}