layui多文件上传-layui文件上传c#后端代码

在Web开发中，实现多文件上传功能是常见的需求之一。使用layui框架可以很方便地构建前端页面，而C#作为后端语言能够高效处理文件的接收和保存。介绍如何通过layui与C#配合实现多文件上传功能。

解决方案

整体解决方案分为两部分：前端使用layui的upload模块创建一个简洁易用的多文件选择界面；后端采用C#编写API接口来接收并保存这些文件。我们还会探讨一些优化措施，如文件类型验证、大小限制等，确保系统稳定可靠。

前端代码示例

在HTML页面中引入layui相关资源：

html
</p>



    
    <title>Layui Multi File Upload</title>
    


    <button type="button" class="layui-btn" id="test">选择多个文件</button>
    <div class="layui-upload-list" id="demoList"></div>

    
    
        layui.use('upload', function(){
            var upload = layui.upload;

            // 多文件列表示例
            var demoListView = $('#demoList')
                ,uploadInst = upload.render({
                    elem: '#test' // 绑定元素
                    ,url: '/api/upload' // 上传接口
                    ,accept: 'file' // 允许上传的文件类型
                    ,multiple: true // 是否允许多文件上传
                    ,before: function(obj){
                        // 预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            var tr = $(['<tr id="upload-'+ index +'">'
                                ,'<td>'+ file.name +'</td>'
                                ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                ,'<td>等待上传</td>'
                                ,'</tr>'].join(''));

                            demoListView.append(tr);
                        });
                    }
                    ,done: function(res, index, upload){
                        var item = $('#upload-'+ index)
                        if(res.code == 0){ // 上传成功
                            item.find('td:last').html('<span style="color: #5FB878">上传成功</span>');
                        }else{
                            item.find('td:last').html('上传失败：'+ res.msg);
                        }
                    }
                    ,error: function(index, upload){
                        $('#upload-'+ index).find('td:last').html('上传失败');
                    }
                });
        });
    



<p>

这段代码实现了前端文件选择和上传的基本功能，包括文件预览、上传进度显示等功能。

C#后端处理方案一：直接保存到服务器

接下来是C#后端代码，这里提供两种思路。种是最简单的直接将文件保存到服务器指定路径下：

csharp
[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
    [HttpPost]
    public async Task Post(IFormFileCollection files)
    {
        try
        {
            string folderPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");</p>

<pre><code>        if (!Directory.Exists(folderPath))
        {
            Directory.CreateDirectory(folderPath);
        }

        foreach (var file in files)
        {
            string filePath = Path.Combine(folderPath, file.FileName);

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

        return Ok(new { code = 0, msg = "上传成功" });
    }
    catch (Exception ex)
    {
        return BadRequest(new { code = 1, msg = $"上传失败：{ex.Message}" });
    }
}

}

此方法简单直接，但需要注意的是实际项目中应加入更多安全检查，例如防止文件名冲突、验证文件类型等。

C#后端处理方案二：结合数据库存储信息

第二种思路是除了保存文件本身外，还将文件相关信息（如名称、大小、上传时间等）存入数据库，以便后续查询和管理：

csharp
using System;
using Microsoft.EntityFrameworkCore;</p>

<p>// 定义实体类
public class FileRecord
{
    public int Id { get; set; }
    public string FileName { get; set; }
    public long Size { get; set; }
    public DateTime UploadTime { get; set; }
}</p>

<p>// 创建DbContext
public class ApplicationDbContext : DbContext
{
    public DbSet Files { get; set; }</p>

<pre><code>protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
    optionsBuilder.UseSqlServer(@"YourConnectionStringHere");
}

}

// 修改控制器
[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
private readonly ApplicationDbContext _context;

public UploadController(ApplicationDbContext context)
{
    _context = context;
}

[HttpPost]
public async Task<IActionResult> Post(IFormFileCollection files)
{
    try
    {
        string folderPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");

        if (!Directory.Exists(folderPath))
        {
            Directory.CreateDirectory(folderPath);
        }

        List<FileRecord> records = new List<FileRecord>();

        foreach (var file in files)
        {
            string filePath = Path.Combine(folderPath, Guid.NewGuid().ToString() + Path.GetExtension(file.FileName));

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

            records.Add(new FileRecord
            {
                FileName = file.FileName,
                Size = file.Length,
                UploadTime = DateTime.Now
            });
        }

        await _context.Files.AddRangeAsync(records);
        await _context.SaveChangesAsync();

        return Ok(new { code = 0, msg = "上传成功" });
    }
    catch (Exception ex)
    {
        return BadRequest(new { code = 1, msg = $"上传失败：{ex.Message}" });
    }
}

}

这种方法虽然复杂度有所增加，但对于需要对上传文件进行管理和统计的应用场景非常有用。

通过以上两种方式可以很好地满足不同场景下的多文件上传需求。在实际应用中还需要根据具体情况进行调整和优化，比如添加更多的异常处理逻辑、设置合理的文件大小限制等。