.Net学习笔记之Layui多图片上传功能
前言:
多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的upload.render方法已经帮我们封装好了,我们只管调用即可,也就是说你选中了几张图片,那么将会向后台请求与图片张数相同的次数,即为遍历提交的方式。
Layui文件/图片样式地址(官方文档):https://www.layui.com/demo/upload.html
一、引入Layui.cs和Layui.js:
需要本地项目中存在layui相关样式和js,非网络地址
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" rel="external nofollow" media="all">
<script src="http://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) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo2').append( '<img src="' + 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; } }
四、效果图展示:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对猪先飞的支持。
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这篇文章主要介绍了.NET Core下使用Kafka的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 这篇文章主要介绍了Win10 IIS 安装及.net 4.5及Win10安装IIS并配置ASP.NET 4.0的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- 这篇文章主要介绍了详解.NET Core 3.0 里新的JSON API,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
- 这篇文章主要介绍了.net数据库操作框架SqlSugar的简单入门,帮助大家更好的理解和学习使用.net技术,感兴趣的朋友可以了解下...2021-09-22
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
- 本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30