ASP.NET MVC使用Layui选择多图片上传-白红宇的个人博客

发布日期：2021-05-08 23:17:59 浏览次数：18 分类：博客文章

本文共 2736 字，大约阅读时间需要 9 分钟。

前言：

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

Layui文件/图片样式地址（官方文档）：

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

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

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

二、前端代码：

Html中的代码：

js中的代码：

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

public class FileUploadController : Controller{/// /// 对验证和处理 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;}}

四、效果图展示：

上一篇：.NET微信网页开发之使用微信JS-SDK调用微信扫一扫功能

下一篇：百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

前言：