.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

.NET Core版文件上传攻略

在.NET Core应用程序中，文件上传是一项常见的任务。本攻略将深入探讨如何使用Bootstrap FileInput插件实现文件上传，并提供两个示例说明。

安装Bootstrap FileInput插件

在.NET Core应用程序中，您需要安装Bootstrap FileInput插件。您可以使用NuGet包管理器或命令行来安装它。

dotnet add package Bootstrap.FileInput

配置Bootstrap FileInput插件

在.NET Core应用程序中，您需要配置Bootstrap FileInput插件。您可以在Startup.cs文件中添加以下代码：

public void ConfigureServices(IServiceCollection services)
{
    // 添加MVC服务
    services.AddMvc();

    // 添加静态文件服务
    services.AddStaticFiles();

    // 添加Bootstrap FileInput服务
    services.AddBootstrapFileInput();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 使用静态文件服务
    app.UseStaticFiles();

    // 使用Bootstrap FileInput服务
    app.UseBootstrapFileInput();

    // 使用MVC服务
    app.UseMvc();
}

在上面的代码中，我们添加了MVC服务、静态文件服务和Bootstrap FileInput服务，并在Configure方法中使用它们。

实现文件上传

在.NET Core应用程序中，您需要实现文件上传。您可以在控制器中添加以下代码：

[HttpPost]
public async Task<IActionResult> Upload(IFormFile file)
{
    if (file == null || file.Length == 0)
    {
        return BadRequest("请选择要上传的文件");
    }

    var fileName = Path.GetFileName(file.FileName);
    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads", fileName);

    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(stream);
    }

    return Ok("文件上传成功");
}

在上面的代码中，我们使用HttpPost属性和IFormFile参数来标记控制器，并获取上传的文件。我们还检查文件是否为空，并将文件保存到服务器上的uploads文件夹中。

实现批量上传

在.NET Core应用程序中，您可以实现批量上传。您可以在控制器中添加以下代码：

[HttpPost]
public async Task<IActionResult> Upload(List<IFormFile> files)
{
    if (files == null || files.Count == 0)
    {
        return BadRequest("请选择要上传的文件");
    }

    foreach (var file in files)
    {
        if (file.Length > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads", fileName);

            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }
        }
    }

    return Ok("文件上传成功");
}

在上面的代码中，我们使用HttpPost属性和List参数来标记控制器，并获取上传的文件列表。我们还检查文件列表是否为空，并将每个文件保存到服务器上的uploads文件夹中。

实现拖拽上传

在.NET Core应用程序中，您可以实现拖拽上传。您可以在视图中添加以下代码：

<input id="file-input" type="file" multiple>

在JavaScript中，您可以使用以下代码实现拖拽上传：

$("#file-input").fileinput({
    theme: "fa",
    uploadUrl: "/upload",
    uploadAsync: true,
    showUpload: true,
    showRemove: true,
    showCancel: true,
    showPreview: true,
    dropZoneEnabled: true,
    maxFileCount: 10,
    allowedFileExtensions: ["jpg", "png", "gif"]
});

在上面的代码中，我们使用fileinput方法初始化Bootstrap FileInput插件，并指定上传URL、异步上传、拖拽上传、最大文件数和允许的文件扩展名。

示例一：使用Bootstrap FileInput上传单个文件

以下是使用Bootstrap FileInput上传单个文件的示例代码：

<form method="post" enctype="multipart/form-data">
    <input id="file-input" type="file">
    <button type="submit">上传</button>
</form>

@section scripts {
    <script src="~/lib/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="~/lib/bootstrap-fileinput/themes/fa/theme.min.js"></script>
    <script>
        $("#file-input").fileinput({
            theme: "fa",
            uploadUrl: "/upload",
            uploadAsync: true,
            showUpload: true,
            showRemove: true,
            showCancel: true,
            showPreview: true,
            dropZoneEnabled: false,
            maxFileCount: 1,
            allowedFileExtensions: ["jpg", "png", "gif"]
        });
    </script>
}

在上面的代码中，我们使用form元素和button元素来上传文件，并在scripts部分添加了Bootstrap FileInput插件的JavaScript代码。

示例二：使用Bootstrap FileInput上传多个文件

以下是使用Bootstrap FileInput上传多个文件的示例代码：

<form method="post" enctype="multipart/form-data">
    <input id="file-input" type="file" multiple>
    <button type="submit">上传</button>
</form>

@section scripts {
    <script src="~/lib/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="~/lib/bootstrap-fileinput/themes/fa/theme.min.js"></script>
    <script>
        $("#file-input").fileinput({
            theme: "fa",
            uploadUrl: "/upload",
            uploadAsync: true,
            showUpload: true,
            showRemove: true,
            showCancel: true,
            showPreview: true,
            dropZoneEnabled: true,
            maxFileCount: 10,
            allowedFileExtensions: ["jpg", "png", "gif"]
        });
    </script>
}

在上面的代码中，我们使用form元素和button元素来上传文件，并在scripts部分添加了Bootstrap FileInput插件的JavaScript代码。

结论

在本攻略中，我们深入讨了如何使用Bootstrap FileInput插件实现文件上传，并提供了两个示例说明。通过遵循这些步骤，您应该能够成功实现文件上传，并在.NET Core应用程序中使用它。