asp.net-core - 更新表单时如何处理文件输入字段的任何想法

Question

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

Answer 1

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

我建议你可以使用jQuery MultiFile.

以下是步骤：

jQuery MultiFile1.下载：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>
}

控制器：

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

对于 asp.net core razor 页面：

索引.cshtml：

@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>
}

索引.cshtml.cs：

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

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

结果：

Answer 2

我一直在使用bootstrap4 文件输入！

在更新表单时加载图像，我使用以下方式：

var filesArray = [];
$(document).ready(function ()
{
    $("#photos").fileinput("refresh",
        {
            showUpload: false,
            showRemove: false
        });
    loadPhotos();
    setTimeout(function ()
    {
        if (filesArray.length > 0)
        {
            $(".file-drop-zone-title").remove();
            $('#photos').fileinput('readFiles', filesArray);
        }
    }, 2500);
   
});

function loadPhotos()
{
    //hddPhotos is a hidden input that I stored the images URLs in
    var photosPath = $('#hddPhotos').val();
    if (photosPath !== null && photosPath!=='')
    {
        var photos = jQuery.parseJSON($('#hddPhotos').val());
        if (photos.length > 0)
        {
            var count = photos.length;
            for (var i = 0; i < count; i++)
            {
                getBlobofImage(photos[i]);
            }
        }
    }
}

function getBlobofImage(imagePath)
{
    var blob = null;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", imagePath);
    xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
    xhr.onload = function ()
    {
        blob = xhr.response;//xhr.response is now a blob object
        filesArray.push(new File([blob], /[^/]*$/.exec(imagePath)[0]));
    };
    xhr.send();
}