DotNet MVC表单提交失败后如何保留FileUpload已选文件

由于浏览器的安全限制，无法直接在表单回发后恢复FileUpload控件的已选文件——浏览器禁止通过脚本修改file控件的value属性，防止恶意脚本获取本地文件路径。以下是几种可行的替代方案：

1. 优先做客户端验证 #

在表单提交前，用JavaScript验证所有非文件字段的合法性，只有前端验证通过后才提交表单。这样可以避免因前端字段错误导致的表单回发，从根源上避免FileUpload控件被清空。

示例（使用jQuery Validate）：

$(function() {
    $('#yourFormId').validate({
        rules: {
            // 定义非文件字段的验证规则
            Name: { required: true, minlength: 2 },
            Email: { required: true, email: true }
        },
        messages: {
            // 自定义错误提示
            Name: "请输入有效的姓名",
            Email: "请输入正确的邮箱格式"
        },
        submitHandler: function(form) {
            // 前端验证通过后，再提交表单
            form.submit();
        }
    });
});

2. 回发后临时存储文件并显示已选状态 #

当表单提交到服务器后，若其他字段验证失败，先将上传的文件保存到服务器临时存储（如临时文件夹、Session或数据库临时表），再将临时文件的标识传递回视图，前端显示已选文件名并通过隐藏字段保存标识，后续提交时从临时存储读取文件。

服务器端代码（Controller） #

[HttpPost]
public ActionResult SubmitForm(YourViewModel model)
{
    if (ModelState.IsValid)
    {
        // 正常处理表单和文件逻辑
        // 若之前有临时文件，记得清理
        if (Session["TempFile"] != null)
        {
            var tempFile = (dynamic)Session["TempFile"];
            System.IO.File.Delete(tempFile.TempPath);
            Session.Remove("TempFile");
        }
        return RedirectToAction("Success");
    }
    else
    {
        // 保存上传的文件到临时位置
        if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0)
        {
            var uploadedFile = Request.Files[0];
            var tempFileName = Guid.NewGuid().ToString() + Path.GetExtension(uploadedFile.FileName);
            var tempFilePath = Path.Combine(Server.MapPath("~/TempFiles"), tempFileName);
            uploadedFile.SaveAs(tempFilePath);
            
            // 将临时文件信息存入Session
            Session["TempFile"] = new 
            { 
                OriginalFileName = uploadedFile.FileName, 
                TempFilePath = tempFilePath 
            };
        }
        return View(model);
    }
}

前端视图代码（.cshtml） #

<div class="form-group">
    @Html.LabelFor(m => m.UploadFile)
    @if (Session["TempFile"] != null)
    {
        var tempFile = (dynamic)Session["TempFile"];
        <p class="text-success">已选择文件: @tempFile.OriginalFileName</p>
        @Html.Hidden("TempFilePath", tempFile.TempFilePath)
    }
    @Html.TextBoxFor(m => m.UploadFile, new { type = "file" })
    @Html.ValidationMessageFor(m => m.UploadFile)
</div>

注意事项 #

• 需在服务器创建~/TempFiles文件夹，并配置权限允许写入。
• 需添加临时文件清理机制（如定时任务、应用启动时清理过期文件），避免占用过多存储。

3. 采用AJAX异步上传文件 #

将文件上传与表单提交分离：先通过AJAX将文件上传到服务器临时存储，返回临时文件标识；表单仅提交其他字段和该标识，即使表单验证失败，文件已在服务器，前端可保持已选文件的显示状态。

前端AJAX上传代码 #

$('#uploadFile').on('change', function() {
    var formData = new FormData();
    formData.append('file', $(this)[0].files[0]);

    $.ajax({
        url: '@Url.Action("UploadTempFile")',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                $('#tempFileId').val(response.tempFileId);
                $('#selectedFileInfo').text('已上传文件: ' + response.fileName);
            } else {
                alert(response.message);
            }
        }
    });
});

服务器端临时上传接口 #

[HttpPost]
public JsonResult UploadTempFile(HttpPostedFileBase file)
{
    if (file == null || file.ContentLength == 0)
    {
        return Json(new { success = false, message = "请选择要上传的文件" });
    }

    var tempFileId = Guid.NewGuid().ToString();
    var tempFilePath = Path.Combine(Server.MapPath("~/TempFiles"), tempFileId + Path.GetExtension(file.FileName));
    file.SaveAs(tempFilePath);

    // 将临时文件ID与路径关联存入Session
    Session[tempFileId] = tempFilePath;

    return Json(new { success = true, tempFileId = tempFileId, fileName = file.FileName });
}

表单提交时处理临时文件 #

在最终提交表单的Action中，通过tempFileId从Session获取临时文件路径，进行后续处理，处理完成后删除临时文件。

内容的提问来源于stack exchange，提问作者user1063108