侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   239

前言:

多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的upload.render方法已经帮我们封装好了,我们只管调用即可,也就是说你选中了几张图片,那么将会向后台请求与图片张数相同的次数,即为遍历提交的方式。

Layui文件/图片样式地址(官方文档):https://www.layui.com/demo/upload.html

一、引入Layui.cs和Layui.js:

需要本地项目中存在layui相关样式和js,非网络地址

 <link rel="stylesheet" href="https://res.layui.com/layui/dist/css/layui.css" rel="external nofollow"   media="all">

 <script src="https://res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

当然假如你需要有弹框提示的话,你还需要引入Layer.js

二、前端代码:

a.Html中的代码:

<li><h6>滚动图片:</h6> <div class="layui-upload"><button type="button" class="layui-btn" id="test2">滚动图片上传【推荐上传三张】</button> <button type="button" class="layui-btn layui-btn-danger" onclick="clearAll()"><i class="layui-icon"></i></button><input type="hidden" name="ScrollingGraph" id="ScrollingGraph"/><blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">预览图:<div class="layui-upload-list" id="demo2"></div></blockquote></div></li>

b.js中的代码:

<script>layui.use('upload',function () {var $ = layui.jquery, upload = layui.upload;//多图片上传upload.render({ elem: '#test2', url: '/FileUpload/FileLoad/', multiple: true,//允许选择多张图片before: function (obj) {//预读本地文件示例,不支持ie8obj.preview(function (index, file, result) {$('#demo2').append('<img src="//article/' + result + '" alt="' + file.name + '" class="layui-upload-img">');});},done: function (res) {if (res.isSuccess == true) {layer.msg("上传成功");var scrollingGraph = $("#ScrollingGraph").val();if (scrollingGraph == "") {$("#ScrollingGraph").val(res.path);} else {scrollingGraph += ',' + res.path;$("#ScrollingGraph").val(scrollingGraph);}console.log(scrollingGraph);} else {return layer.msg('上传失败');}}});});//清空所有图片function clearAll() {layer.confirm("确定要全部清空吗?", {icon: 3,btn: ["确定", "取消"],yes: function (index) {$("#demo2").html("");$("#ScrollingGraph").val("");layer.close(index);}});}</script>

三、服务端接口图片文件流,并保存:

1public class FileUploadController : Controller 2{ 3/// <summary>/// 对验证和处理 HTML 窗体中的输入数据所需的信息进行封装,如FromData拼接而成的文件/// </summary>/// <param name="context">FemContext对验证和处理html窗体中输入的数据进行封装</param>/// <returns></returns>[HttpPost]public ActionResult FileLoad(FormContext context) {HttpPostedFileBase httpPostedFileBase = Request.Files[0];//获取二进制图片文件流if (httpPostedFileBase != null){try{ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");ControllerContext.HttpContext.Response.Charset = "UTF-8";string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始文件名称string fileExtension = Path.GetExtension(fileName);//文件扩展名byte[] fileData = ReadFileBytes(httpPostedFileBase);//文件流转化为二进制字节string result = SaveFile(fileExtension, fileData);//文件保存if (string.IsNullOrEmpty(result)){return Json(new { isSuccess = false, path = "",errorMsg= "上传文件失败"});}return Json(new { isSuccess = true, path = result });}catch (Exception ex){return Json(new { isSuccess = false, path = "" });}}else{return Json(new { isSuccess = false, path = "" });}}/// <summary>/// 将文件流转化为二进制字节/// </summary>/// <param name="fileData">图片文件流</param>/// <returns></returns>private byte[] ReadFileBytes(HttpPostedFileBase fileData){byte[] data;using (Stream inputStream = fileData.InputStream){MemoryStream memoryStream = inputStream as MemoryStream;if (memoryStream == null){memoryStream = new MemoryStream();inputStream.CopyTo(memoryStream);}data = memoryStream.ToArray();}return data;}/// <summary>/// 保存文件/// </summary>/// <param name="fileExtension">文件扩展名</param>/// <param name="fileData">图片二进制文件信息</param>/// <returns></returns>private string SaveFile(string fileExtension, byte[] fileData){string result;try{string saveName = Guid.NewGuid().ToString()+ fileExtension; //保存文件名称// 文件上传后的保存路径string basePath = "UploadFile";string saveDir = DateTime.Now.ToString("yyyy-MM-dd");string savePath = System.IO.Path.Combine(saveDir, saveName);string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir);if (!System.IO.Directory.Exists(serverDir)){System.IO.Directory.CreateDirectory(serverDir);}string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存文件完整路径System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes创建一个新的文件,按照对应的文件流写入,假如已存在则覆盖//返回完整的图片保存地址result="/"+basePath + "/" + saveDir + "/" + saveName;}catch (Exception){result = "发生错误";}return result;}}

四、效果图展示:


总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家的支持。


  • 上一条:
    ajax实现文件异步上传并回显文件相关信息功能示例
    下一条:
    Ajax获取回调函数无法赋值给全局变量的问题
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客