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

Question

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

Answer 1

The problem is in the update form how can handle the preview, delete adding new files to the multiple file input. Is there a best practice to solve such thing.

我建议你可以使用 jQuery MultiFile.

步骤如下：

1.Download jQuery MultiFile:https://multifile.fyneworks.com/#Install

2.Find 下载 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 核心剃须刀页面：

Index.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>
}

Index.cshtml.cs:

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

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

结果：

Answer 2

我一直在使用 bootstrap4 file input!

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


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();
}

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

Any Idea how to handle file input fields when updating a form

model

asp.net-core

razor-pages

bootstrap-file-input

对于 asp.net 核心 mvc:

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