C# MVC 多图片上传预览

黄瓜炒鸡蛋emm

已于 2023-06-26 15:51:42 修改

阅读量8.4k

点赞数

分类专栏： .Net HTML5 Layui 文章标签： c# mvc javascript layui

于 2023-06-26 15:51:25 首次发布

本文链接：https://blog.csdn.net/wuyanedwardelrid/article/details/131398491

版权

本文介绍了使用Layui框架和jQuery实现前端多文件上传、预览功能，通过Ajax提交到后台C#控制器，配合阿里云OSS进行文件存储，并将相关信息存储到数据库的过程。

摘要由CSDN通过智能技术生成

一.效果图：

在这里插入图片描述
开发框架：MVC，Layui
列表主界面这里就不展示了，可以去看看这篇文章：Layui项目实战，这里讲的是“上传Banner”界面功能：
其中包括，多文件上传，预览，后台接收，保存，仅此而已

二.项目代码：

1.前端Html代码

head头部代码块：
注意：这里引用的是Layui和jQuery插件，不过重点功能还是在jQuery，Layui只是起到样式效果

<head>
    <meta name="viewport" content="width=device-width" />
    <title>PushCircleBanner</title>
    <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/layui/layui.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 80%;
            height: 80vh;
            margin: auto;
        }

            .box p {
                height: 30px;
                margin: 10px;
            }

        #file{
            display:none;
        }

        .ImgsBox img{
            width:100px;
            height:100px;
        }

        .select,input{
            width:200px;
        }

    </style>
</head>

body代码块：
注意：这里既然是文件上传，重点自然是input[“file”]，multiple=“multiple"多文件上传，accept=”.png,.jpg,.jpeg,.bmp,.gif,.jfif,.ico "限制允许选择的文件类型

<div class="box">
        <p>性别：</p>
        <p class="layui-input-inline">
            <select name="sex" class="sex layui-input select">
                <option value="0" selected>全部</option>
                <option value="1