您现在的位置是：网站首页> 编程资料编程资料

.Net学习笔记之Layui多图片上传功能_实用技巧_

2023-05-24 351人已围观

简介 .Net学习笔记之Layui多图片上传功能_实用技巧_

前言：

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

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

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

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

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

二、前端代码：

a.Html中的代码：

滚动图片：
 预览图：

b.js中的代码：

三、服务端接口图片文件流，并保存：

 1public class FileUploadController : Controller 2{ 3///  /// 对验证和处理 HTML 窗体中的输入数据所需的信息进行封装，如FromData拼接而成的文件 /// 
 /// FemContext对验证和处理html窗体中输入的数据进行封装 ///  [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 = "" }); } } ///  /// 将文件流转化为二进制字节 /// 
 /// 图片文件流 ///  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; } ///  /// 保存文件 /// 
 /// 文件扩展名 /// 图片二进制文件信息 ///  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; } }