.Net学习笔记之Layui多图片上传功能

以下是“.Net学习笔记之Layui多图片上传功能”的完整攻略：

简介

在现代网站开发中，图片上传功能是一个很基础且常见的需求，而Layui框架作为一款前端开发框架，提供了便捷的多图片上传插件。本篇笔记介绍如何使用Layui的多图片上传插件完成多图片上传功能，并配合C#编写后台代码进行文件保存和数据传输。

准备

本地安装Visual Studio集成开发环境及.Net框架（推荐使用VS 2019及.Net 5.0版本）。
搭建本地Web服务器（如IIS Express）。

步骤

1. 在Visual Studio中创建项目并添加必要的文件

在Visual Studio中以ASP.NET Core Web Application模板创建一个Web项目（注意：需要选择Web Application具有用户界面的类型）。
在项目中添加Layui的多图片上传插件lamda-upload.js和lamda-upload.css。
在项目中添加用于处理上传请求的C#后台代码FileUploadController.cs。

2. 添加HTML及JavaScript代码

在HTML代码中引入Layui的多图片上传插件lamda-upload.js和lamda-upload.css，并添加一个包含上传图片功能的

元素。

<!DOCTYPE html>
<html>
<head>
    <link href="lamda-upload.css" rel="stylesheet" />
    <script src="lamda-upload.js" type="text/javascript"></script>
</head>
<body>
    <form id="uploadForm">
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        </div>
    </form>
</body>
</html>

在JavaScript代码中编写Layui多图片上传功能的相关代码。首先初始化多图片上传，然后在文件上传成功后将文件信息及其在服务器的路径回传给后台。这里我们以ajax传输数据的方式将数据传输至后台。

layui.use('upload', function(){
    var upload = layui.upload;
    //多文件列表示例
    var demoListView = $('#demoList')
    var uploadListIns = upload.render({
        elem: '#testList'
        ,url: '/api/FileUpload/SaveUploadImage'
        ,accept: 'images'
        ,multiple: true
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                demoListView.append('<tr><td>'+ file.name +'</td><td>'+ (file.size/1014).toFixed(1) +'kb</td><td>等待上传</td></tr>');
            });
        }
        ,done: function(res){
            //上传完毕回调
            console.log(res);
            if(res.code == 0){ //上传成功
                var html = '<tr><td>'+ res.fileName +'</td><td>'+ (res.fileSize/1014).toFixed(1) +'kb</td><td><a href="'+ res.filePath +'" target="_blank">查看</a> | <a href="#" onclick="DeleteImage(\''+ res.fileName +'\',this);return false;">删除</a></td></tr>'
                demoListView.append(html);
            } else { //上传失败
                layer.msg(res.msg);
            }
        }
    });
});

3. 添加C#后台代码

在Visual Studio中新建一个C#控制器FileUploadController.cs，在其中编写保存上传文件的代码。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace <命名空间>
{
    [Route("api/[controller]")]
    [ApiController]
    public class FileUploadController : ControllerBase
    {
        [HttpPost("SaveUploadImage")]
        public async Task<IActionResult> SaveUploadImage()
        {
            try
            {
                string dir = Directory.GetCurrentDirectory() + "\\wwwroot\\uploadimages\\";
                IFormFileCollection files = Request.Form.Files;
                if (files != null && files.Count() > 0)
                {
                    foreach (var file in files)
                    {
                        if (file.Length > 0)
                        {
                            string fileName = Path.GetFileName(file.FileName);
                            string fileExt = Path.GetExtension(fileName).ToLower();
                            if (fileExt == ".jpg" || fileExt == ".jpeg" || fileExt == ".png")
                            {
                                if (!Directory.Exists(dir)) Directory.CreateDirectory(dir);
                                string filePath = dir + DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExt;
                                using (FileStream fs = System.IO.File.Create(filePath))
                                {
                                    await file.CopyToAsync(fs);
                                    fs.Flush();
                                }
                                return Ok(new { code = 0, fileName = fileName, fileSize = file.Length, filePath = filePath.Replace(Directory.GetCurrentDirectory() + "\\wwwroot", "") });
                            }
                            else
                            {
                                return Ok(new { code = 1, msg = "只能上传jpg、jpeg、png格式的图片" });
                            }
                        }
                    }
                }
                return Ok(new { code = 1, msg = "请选择要上传的图片" });
            }
            catch (Exception ex)
            {
                return Ok(new { code = 1, msg = ex.Message });
            }
        }
    }
}

按F5启动网站，并访问HTML文件即可查看上传结果。

至此，“.Net学习笔记之Layui多图片上传功能”的完整攻略结束。其中第2步添加HTML及JavaScript代码及第3步添加C#后台代码可根据具体的需求进行灵活修改。下面提供两条相关的示例说明。

示例说明

示例1：如何修改文件上传的路径

在后台代码中的string dir变量中修改上传文件的保存路径，例如：将当前保存路径改为Upload目录下，则需要将“string dir = Directory.GetCurrentDirectory() + \"\wwwroot\uploadimages\";”改为“string dir = Directory.GetCurrentDirectory() + \"\wwwroot\Upload\";”。

示例2：如何修改文件上传的类型

在后台代码中对上传文件的扩展名进行验证的语句"if (fileExt == \".jpg\" || fileExt == \".jpeg\" || fileExt == \".png\")"进行修改，例如：允许上传的文件扩展名为".jpg"、".jpeg"、".png"、".gif"等，则需要将该语句修改为"if (new string[] { \".jpg\", \".jpeg\", \".png\", \".gif\" }.Contains(fileExt))"。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：.Net学习笔记之Layui多图片上传功能 - Python技术站