layui之图片上传

前言：个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说，书友交流群：580462139（群主及管理均为资深90后程序猿哦）

前言：

       layui是一套非常棒的前端框架，使用它可以为我们省掉大量在前端UI布局、调整上花的时间，但是layui官方文档上面只显示了前端部分代码，与后台做交互的部分是没有，以下就为大家讲解如何使用layui图片上传控件

 

前台代码：

   <div class="layui-upload">
     <div class="col-sm-1"> </div>
     <div class="col-sm-2">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
     </div>
     <div class="col-sm-6">
        <div class="layui-upload-list">
           <img class="layui-upload-img"  id="demo1" style="width:580px;height:100px;">
           <p id="demoText" ></p>
           <input name="B_Url" type="hidden" value=""/></div>
        </div>
     </div>


<script>
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'upload'
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
            }
            , done: function (res) {
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                layer.msg(res.msg, { icon: 6, time: 1000 });
            }
            , done: function (fileName) {
                $('[Name=B_Url]').val(fileName.src);
            }
            , error: function () {
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
    var b_Type = $('[name="B_Type"]').val();
    alert(b_Type);
</script>

其中,后台向前端传回的返回值集合为res，传回的详细信息为：src、name、msg、filename，具体需要哪些参数，可以自行修改后台部分代码，

 

后台代码：

  /// <summary>
        /// layui图片上传demo
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult upload()
        {
            try
            {
                var file = Request.Files[0];
                var filecombin = file.FileName.Split('.');
                if (file == null || String.IsNullOrEmpty(file.FileName) || file.ContentLength == 0 || filecombin.Length < 2)
                {
                    return Json(new
                    {
                        fileid = 0,
                        src = "",
                        name = "",
                        msg = "上传出错 请检查文件名 或 文件内容"
                    });
                }
                //定义本地路径位置
                string local = "Upload\\" + System.DateTime.Now.ToString("yyyy-MM-dd");
                string filePathName = string.Empty;
                string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);

                var tmpName = Server.MapPath("~/Upload/" + System.DateTime.Now.ToString("yyyy-MM-dd") + "/");
                var tmp = file.FileName;
                var tmpIndex = 0;
                //判断是否存在相同文件名的文件 相同累加1继续判断
                while (System.IO.File.Exists(tmpName + tmp))
                {
                    tmp = filecombin[0] + "_" + ++tmpIndex + "." + filecombin[1];
                }

                //不带路径的最终文件名
                filePathName = tmp;

                if (!System.IO.Directory.Exists(localPath))
                    System.IO.Directory.CreateDirectory(localPath);
                string localURL = Path.Combine(local, filePathName);
                file.SaveAs(Path.Combine(localPath, filePathName));   //保存图片（文件夹）
                return Json(new
                {
                    src = localURL.Trim().Replace("\\", "/"),
                    name = Path.GetFileNameWithoutExtension(file.FileName),   // 获取文件名不含后缀名
                    msg = "上传成功",
                    fileName = System.DateTime.Now.ToString("yyyy-MM-dd") + "/" + filePathName//最终返回的路径及文件名称

                });
            }
            catch { }
            return Json(new
            {
                src = "",
                name = "",   // 获取文件名不含后缀名
                msg = "上传出错",
                fileName=""
            });

        }

以上，为layui图片上传的一个简单demo

联系方式：

                 wechat&QQ&Tel：13501715983（如查不到请加QQ：631931078或352167311）

                 个人邮箱：13212644043@163.com

                 

如有问题或改进地方请多多指点，本文为个人原创，转载请加以说明