任何想法在更新表单时如何处理文件输入字段

Question

我正在使用带有Razor表单的asp.net core 3.1。我有一个包含文件类型输入的表单，它是多个文件输入。在创建表单中，可以轻松地从模型访问文件。问题是在更新表单中如何处理预览，删除添加多个新文件文件输入。是否有解决此问题的最佳实践。

Answer 1

问题是在更新表单中如何处理预览，删除添加新文件到多文件输入。是否有解决此问题的最佳实践。

我建议您可以使用jQuery MultiFile。

以下是步骤：

1。下载jQuery MultiFile：jQuery MultiFile

https://multifile.fyneworks.com/#Install

2。找到下载的zip文件并解压缩，然后移至项目文件夹：wwwroot/lib

对于asp.net核心mvc：

查看：

控制器：

<form asp-controller="Home" asp-action="UploadData" enctype="multipart/form-data">
    <div>
        <input type="file" name="files" multiple="multiple" class="multi with-preview" />

        <input type="submit" value="Upload" />
    </div>
</form>

@section Scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>

    <script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}

对于asp.net核心剃须刀页面：

Index.cshtml：

[HttpPost]
public IActionResult UploadData(List<IFormFile> files)
{
    //do your stuff...
    return Ok();
}

Index.cshtml.cs：

@page
@model IndexModel
<form asp-page-handler="UploadData" enctype="multipart/form-data">
    <div>
        <input type="file" name="files" multiple="multiple" class="multi with-preview" />

        <input type="submit" value="Upload" />
    </div>
</form>

@section Scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>

    <script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}

结果：

public class IndexModel : PageModel
{
    public IActionResult OnGet()
    {
        return Page();
    }

    public IActionResult OnPostUploadData(List<IFormFile> files)
    {
        return Page();
    }
}