怎么在.Net中使用Layui实现多图片上传功能
创始人
2024-11-27 13:26:51
0次

一、引入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;
    }
    }

    相关内容

    热门资讯

    空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
    空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
    格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
    空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
    格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
    品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
    空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
    空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
    中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
    中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...