C# MVC 多图片上传预览

news2024/10/1 7:42:39

一.效果图:

在这里插入图片描述
开发框架: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">男</option>
                <option value="2">女</option>
            </select>
        </p>
        <p>是否去重:</p>
        <p class="layui-input-inline">
            <select name="isDistinct" class="isDistinct layui-input select">
                <option value="0" selected>否</option>
                <option value="1">是</option>
            </select>
        </p>
        <p>图片上传:</p>
            <p>
            <input type="button" class="layui-btn" name="name" onclick="$('#file').click()" value="上传" />
            <input id="file" type="file" multiple="multiple" name="img" value="上传" accept=".png,.jpg,.jpeg,.bmp,.gif,.jfif,.ico " onchange="PushFiles()" />
            </p>

        <p><input type="button" class="layui-btn submit" onclick="Save()" value="保存" /></p>
        
    <div class="ImgsBox">

    </div>


</div>

Js代码块:

注意:PushFiles方法,由点击显示的上传按钮,再触发隐藏的input[“file”]按钮的点击方法,改变files值后触发该方法,实现多文件上传效果,也是这里前端界面展示的重点

<script>
        var files;
        function PushFiles() {
            $('.ImgsBox').html('');
            files = document.getElementById('file').files;
            if (files && files.length > 0) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var URL = window.URL || window.webkitURL;
                    var imgURL = URL.createObjectURL(file);
                    console.log(imgURL);
                    var img = $('<img src="" />');
                    img.attr('src', imgURL);
                    $('.ImgsBox').append(img);
                }
                
            }
        }

注意:Save方法,由点击保存按钮触发,js的FormData对象进行表单参数收集,ajax再通过文件传输的方式,提交到后台

        function Save() {
            if (files && files.length > 0) {
                var formData = new FormData();
                formData.append('sex', $('.sex').val());
                formData.append('isDistinct', $('.isDistinct').val());

                for (var i = 0; i < files.length; i++) {
                    formData.append('img_'+i,files[i] );
                }

                $.ajax({
                    url: '/Circle/PushBanner',
                    data: formData,
                    type: 'POST',
                    cache: false,//这个参数是jquery特有的,不进行序列化,因为我们不是json格式的字符串,而是要传文件
                    processData: false, //注意这里一定要设置contentType:false,不然会默认为传的是字符串,这样文件就传不过去了
                    contentType: false,
                    //dataType: "json",
                    success: function (res) {
                        if (res.code == 0) {
                            var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引   
                            parent.layer.close(index);//再执行关闭
                        } else {
                            alert(res.msg);
                        }
                    }
                })
            } else {
                alert("请选择上传文件!");
            }

            
        }
    </script>

2.后台C#代码

注意:下面的后台代码块,只要把间隔的注意提示去掉,就能拼接出完整的后台代码

	/// <summary>
    /// 图片批量上传
    /// </summary>
    /// <returns></returns>
    public ActionResult PushBanner()
    {

后台登录校验

        if (!(Session["account"] is AccountModel account))
            return Json(new { code = -1, msg = "登录异常" }, JsonRequestBehavior.AllowGet);

获取前端传输参数:

        StringBuilder msg = new StringBuilder();
        int error = 0;
        AliyunOssProvider aliyunOss = new AliyunOssProvider();
        string suffix = string.Empty;
        var files = Request.Files;	//ajax传输文件
        var sex = Request.Form["sex"] == null ? 0 : int.Parse(Request.Form["sex"]);
        var isDistinct = Request.Form["isDistinct"] == null ? 0 : int.Parse(Request.Form["isDistinct"]);

多文件循环保存:

        for (int i = 0; i < files.Count; i++)
        {
            var type = files[i].ContentType;
            if (type.Contains("image"))
            {
                switch (type)
                {
                    case "image/jpeg":
                        suffix = ".jpg";
                        break;
                    case "image/png":
                        suffix = ".png";
                        break;
                    case "image/bmp":
                        suffix = ".bmp";
                        break;
                    case "image/gif":
                        suffix = ".gif";
                        break;
                    case "image/pipeg":
                        suffix = ".jfif";
                        break;
                    case "image/x-icon":
                        suffix = ".ico";
                        break;
                    default:
                        error++;
                        var obj = new {
                            code = -1,
                            msg = "检测到非指定文件格式(jpg/png/bmp/gif/ico/jfif)"
                        };
                        msg.AppendLine(JsonHelper.SerializeObject(obj));
                        continue;
                        //return Json(new { result = false, messge = "请将图片转化为(jpg/png/bmp/gif/ico/jfif)格式然后上传!" });
                }
                if (string.IsNullOrWhiteSpace(suffix))
                {
                    error++;
                    var obj = new
                    {
                        code = -1,
                        msg = "检测到非指定文件格式(jpg/png/bmp/gif/ico/jfif)"
                    };
                    msg.AppendLine(JsonHelper.SerializeObject(obj));
                    continue;
                }
                var file = "banner/";
                var fileName = DateTime.Now.ToStampDateTime() + "_"+i + suffix;

阿里云图床文件存储,底层不予展示:

                try
                {
                    var absoluteUri = aliyunOss.UploadObject(files[i].InputStream, file + fileName);
                }
                catch (Exception e)
                {
                    error++;
                    var obj = new { code = -2, message = "文件上传失败" };
                    msg.AppendLine(JsonHelper.SerializeObject(obj));
                    //return Json(new { result = false, message = "上传失败" });
                }

Banner信息存数据库:(底层是数据库保存语句)

                var res = new CircleBll().AddCircleBanners(
                    new Model.CircleBanner() {
                        ImgUrl = AppConfig.AliyunUrl + file + fileName,
                        Sex = sex.ToString(),
                        IsDistinct = isDistinct.ToString(),
                        OperatorId = account.UserId.ToString()
                    }
                );
                if (!res)
                {
                    error++;
                    var obj = new { code = -3, message = "圈子Banner数据库存储失败" };
                }

            }
        }

        return error == 0 ? Json(new { code = 0, msg = "",data = true })
        : Json(new { code = error * -1,msg = msg.ToString(),data = false });
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/687027.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Python】python进阶篇之文件操作

文件操作 编码格式 python3默认的文件编码就是UTF-8 以下内容来源于AI 编码格式是指将字符、符号、数字等信息转化为二进制形式以便计算机能够理解和处理的规则或标准。在计算机领域&#xff0c;常见的编码格式有 ASCII、Unicode、UTF-8 等。 ASCII&#xff08;American Stand…

技术管理三板斧第一板斧拿结果-追过程

一、什么是过程管理&#xff1f; 管理就是追求事务的可持续发展&#xff0c;而想要达成这个目标有两个基本点&#xff1a; 管理动作要形成可持续迭代的闭环&#xff1b; 管理动作足够简单到可以复制和个性化升级。 过程管理当然也遵循这个理念。比如你这次 A 项目做得很好&a…

NXP i.MX 8M Plus工业开发板硬件说明书--上册( 四核ARM Cortex-A53 + 单核ARM Cortex-M7,主频1.6GHz)

前 言 本文档主要介绍创龙科技TLIMX8MP-EVM评估板硬件接口资源以及设计注意事项等内容。 创龙科技TLIMX8MP-EVM是一款基于NXP i.MX 8M Plus的四核ARM Cortex-A53 单核ARM Cortex-M7异构多核处理器设计的高性能工业评估板&#xff0c;由核心板和评估底板组成。ARM Cortex-A5…

FreeRTOS 队列传递结构体、内存块等复合数据类型

1. 队列一般传递的不是单个整型数据或者字符型数据&#xff0c;而是传递结构体或者内存块&#xff0c;一块内存的指针 2. 定义结构体数据类型 /* 定义队列传递的结构类型。 */ typedef struct { unsigned char ucValue; unsigned char ucSource; } xData; /* 声明两个xData类…

使用@RequiredArgsConstructor注入时@Qualifier失效问题

在一个项目中&#xff0c;使用到了 Lombok 的RequiredArgsConstructor注解来注入对象 Service RequiredArgsConstructor public class DeliveryServiceImpl implements DeliveryService {private final ResourceDao resourceDao; }因为ResourceDao接口有两个实现类 Repositor…

5大趋势!牛客CEO叶向宇深度解读《2023春季校园招聘白皮书》

校招并不只是一场求职者与企业间的相互选择&#xff0c;而是一场关乎未来的人才战略布局。 近日&#xff0c;牛客CEO叶向宇在「数智链接 向新而生」牛客青年人才招聘峰会中深度解读了《牛客2023春季校园招聘白皮书》中的5大校招趋势&#xff0c;为我们提供了宝贵的洞察。 01.校…

公司刚上市就来了个从字节拿28K的人,让我见识到了什么才是测试天花板···

5年测试&#xff0c;应该是能达到资深测试的水准&#xff0c;即不仅能熟练地开发业务&#xff0c;而且还能熟悉项目开发&#xff0c;测试&#xff0c;调试和发布的流程&#xff0c;而且还应该能全面掌握数据库等方面的技能&#xff0c;如果技能再高些的话&#xff0c;甚至熟悉分…

对作用域链的理解

一、作用域 作用域&#xff0c;即变量&#xff08;变量作用域又称上下文&#xff09;和函数生效&#xff08;能被访问&#xff09;的区域或集合 换句话说&#xff0c;作用域决定了代码区块中变量和其他资源的可见性 举个例子 function myFunction() {let inVariable "…

厉害的人都在用的思维导图-思维导图的七大图示

思维导图是一种非常实用的工具&#xff0c;它可以帮助我们更好地组织和表达自己的思想。 在这篇文章中&#xff0c;我将会介绍用ProcessOn完成思维导图的7大图示&#xff0c;并解释它们各自的作用和应用场景。 思维导图是一种非常实用的工具&#xff0c;它可以帮助我们更好地组…

H264码流插入和读取自定义数据(SEI字段)

目录 1. 前言2. H264码流结构2.1 文字说明2.2 码流格式图解 3. 自定义数据封装以及H264码流插入3.1 将自定义数据封装成SEI字段通用格式即可插入H264码流中3.2 编码逻辑 4. 代码5. 总结 1. 前言 本文主要记录&#xff0c;如何在已有的H264码流中插入自定义的数据&#xff0c;并…

商家说:我的对讲机能通话10公里、50公里,你敢信吗?

有不少渠道经销商&#xff0c;在日常经营中往往会遇到用户的经典四问&#xff1a; 您家的对讲机通话距离远吗&#xff1f;待机时间长吗&#xff1f;功能多吗&#xff1f;经得住摔吗&#xff1f; 对讲机用户常问的问题 对于后三问&#xff0c;通常还有电池电量、技术规格、功能…

查找ABAP代码

SE38执行&#xff1a;RS_ABAP_SOURCE_SCAN/RPR_ABAP_SOURCE_SCAN 批量查找字符串使用位置

互联网工程师 Java 面试题及答案整理(2023 速成版,7 天就能吃透)

现在 Java 面试都只是背答案吗&#xff1f; 不背就通过不了面试&#xff0c;但是现在面试都问原理、问场景&#xff01;Java 面试题就像我们高考时的文言文&#xff0c;包括古诗词&#xff0c;不背是不可能答出来的&#xff01;当然了&#xff0c;除了背&#xff0c;还得理解&…

全网最牛,性能测试超全流程总结整理,你都遗漏了什么...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、性能需求分析 …

Jenkins自动化构建

自动化构建 Jenkins 是一款开源 CI&CD 软件&#xff0c;用于自动化各种任务&#xff0c;包括构建、测试和部署软件 Jenkins 支持各种运行方式&#xff0c;可通过系统包、Docker 或者通过一个独立的 Java 程序 安装依赖 安装参考&#xff1a;Windows环境下安装Jenkins **…

解锁市场潜力:海外网红营销效果最大化的7个关键步骤

在当今数字化时代&#xff0c;海外网红营销已经成为许多企业推广产品和品牌的重要手段。通过与海外网红合作&#xff0c;品牌可以有效地扩大影响力和受众群体&#xff0c;并提升产品或服务的认知度。然而&#xff0c;要实现海外网红营销效果最大化&#xff0c;并不是一件轻而易…

一元函数微分学中导数--定义--意义--基本公式--运算法则

目录 导数的定义 左导数和右导数 导数的几何意义和物理意义 几何意义 导数的几何意义--切线的斜率 物理意义 导数的物理意义——瞬时速度 基本初等函数导数公式 基本初等函数 常用基本初等函数导数公式 导数求解的四则运算法则 函数的求导法则 复合函数求导法则 导…

Linux驱动入门(五)——构建第一个驱动程序

文章目录 前言开发环境配置之内核升级为什么升级内核内核升级 Hello world 驱动程序驱动模块的组成Hello World模块编译Hello World模块模块的操作Hello World模块加载后文件系统的变化 模块参数和模块之间通信模块参数模块的文件格式ELF模块之间的通信模块之间的通信实例 将模…

RHEL 9 新特性及技术演示

OpenSSH&#xff1a;新增禁止 root 的密码登录 Cockpit&#xff1a;RHEL 的 Web 控制台 DNF-3&#xff1a;软件安装方法 NetworkManager&#xff1a;网络管理的主要组件 Nftables&#xff1a;默认的用户空间防火墙 WireGuard&#xff1a;快速、安全的 VPN 隧道&#xff08…

阿里架构师珍藏版“亿级高并发系统设计手册(2023 版)”

高并发 俗话说&#xff1a;罗马不是一天建成的&#xff0c;系统的设计当然也是如此。 从原来谁都不看好的淘宝到现在的电商巨头&#xff0c;展现的不仅仅是一家互联网巨头的兴起&#xff0c;也是国内互联网行业迎来井喷式发展的历程&#xff0c;网络信号从 2G 发展到现在的 5…