layui的图片上传使用

Posted bklsj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui的图片上传使用相关的知识,希望对你有一定的参考价值。

先上效果图。虽然还是有点BUG明天再调

技术图片

 

在用之前呢,你得先更新最新版的layui版本。经验之谈_(:_」∠)_ 

今天在用的时候,实在是碰到太多的坑,本来是拒绝更新到最新版来着。

首先是layui.js和layui.all.js的问题。这个是什么问题呢!就是layui.js没有upload.render方法

_(:_」∠)_                              _(:_」∠)_                              _(:_」∠)_ 

于是就在百度搜索了:“layui.js is not found reder” 有答案说用layui.all.js

然后引用layui.all.js,而layui.all.js有render方法却不会触发<input type=file的上传功能。(吐血一波)( ̄ー ̄)

然后走神了下百度了 “layui.js和layui.all.js的区别” ,然后也不知道怎么回事,反正莫名其妙好了。

好的,那么我就继续往下。上传之后图片不预览出来。这是自己傻逼,被搞懵了,只是一个layuihide样式没删掉,又吐血一波(楼主最近补血嫌血多,多糖铁复合胶囊、生血宁片,你值得拥有)

就这么用了测试几回后.......打开windows的upload功能(其实就是<input type=file>打开的那个弹窗)没用了,回想起来可能是缓存还是怎么滴吧。哎呀,反正也不写废话了,中间的波折也就过了。

好,一个上午就这么没了。

下午上班,更新了最新版后。导入layui.js和 layui/lay/modules/upload.js(我也忘记有没有用了,反正就导了)完美,不会出现上午的问题了。人呐就是这么傻,能简单解决的非得找原因解决。

接下来是编写后台、写样式、js调试、添加删除按钮以及删除功能。layui图片上传是没用删除按钮的,除非是表格式的,不过区别也不大,只是不太好看。

编写传到mvc控制器的后台,emm

 public class UploadFileController : MvcControllerBase
    {
        public ActionResult UploadImg() {
            string resultUrl = "";
            for (int i = 0; i < Request.Files.Count; i++)
            {
                
                resultUrl += Upload(Request.Files[i]);
                if (i<Request.Files.Count-1)
                {
                    resultUrl += ",";
                }
            }
            return Success("上传成功", resultUrl);
        }

        private string Upload(HttpPostedFileBase postedFile) {
            UploadFiles uf = new UploadFiles();
            string filepath = "images\\Goods\\";
            string path = GetMapPath(filepath);//UploadFile/images/goods/
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
            var filelength = postedFile.ContentLength;
            string fileExt = GetPostfixStr(postedFile.FileName);
            var fileMaxSize = 307200; //300K
            var fileName = Guid.NewGuid() + "." + fileExt; //返回的上传后的文件名
            string resultUrl = Config.GetValue("ServerIpHost") + "/UploadFile/images/Goods/" + fileName;//存入数据库的链接
            if (filelength <= fileMaxSize)
            {
                byte[] buffer = new byte[filelength];
                postedFile.InputStream.Read(buffer, 0, filelength);
                postedFile.SaveAs(path + fileName);
            }
            return resultUrl;
        
        }
        /// <summary>
        /// 获取文件格式名
        /// </summary>
        /// <param name="filename"></param>
        /// <returns></returns>
        private  string GetPostfixStr(string filename)
        {
            int start = filename.LastIndexOf(".");
            int length = filename.Length;
            string postfix = filename.Substring(start + 1);
            return postfix;
        }
        public string GetMapPath(string strPath)
        {
            if (System.Web.HttpContext.Current != null)
            {
                return System.Web.HttpContext.Current.Server.MapPath(strPath);
            }
            else //非web程序引用
            {
                strPath = strPath.Replace("/", "\\");
                if (strPath.StartsWith("\\"))
                {
                    strPath = strPath.Substring(strPath.IndexOf(‘\\‘, 1)).TrimStart(‘\\‘);
                }
                return System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, strPath);
            }
        }
    }

 写了两个图片上传,一个是多图,一个是单图

   layui.use([‘form‘, ‘upload‘, ‘element‘], function () {
        var form = layui.form
            , layer = layui.layer;
        var upload = layui.upload;
        var element = layui.element;
        var $ = layui.jquery;

        //拖拽上传
        var uploadMain = upload.render({
            elem: ‘#test10‘
            , url: ‘/UploadFile/UploadImg‘ //改成您自己的上传接口
            //, before: function (obj) {//上传前触发
            //    //预读本地文件示例,不支持ie8
            //    obj.preview(function (index, file, result) {
            //        layui.$(‘#uploadDemoView‘).removeClass(‘layui-hide‘).find(‘img‘).attr(‘src‘, result);
            //        //$(‘#demo2‘).attr(‘src‘, result); //图片链接(base64)
            //    });
            //}
            , choose: function (obj) {//选择后触发
                var files = this.files = obj.pushFile();
                var view = layui.$(‘#uploadDemoView‘);
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    var _html = $([‘<div class="divimg" style="float:left;">‘
                        , ‘<img style="max-width: 196px;max-height:200px"  id="viewImg‘ + index + ‘" alt="上传成功后渲染"  src="‘ + result + ‘">‘
                        , ‘<div class="divX" >‘
                        , ‘<img src = "/Content/images/ui_close.png" width = "20" height = "20" />‘
                        , ‘</div>‘
                        , ‘</div>‘].join(‘‘));
                    _html.find(".divX").on(‘click‘, function () {
                        delete files[index]; //删除对应的文件
                        _html.remove();
                        uploadDetail.config.elem.next()[0].value = ‘‘;
                    })

                    layui.$(‘#uploadDemoView‘).removeClass(‘layui-hide‘);
                    view.removeClass(‘layui-hide‘);
                    _html.find(".divX").on(‘click‘, function () {
                        delete files[index]; //删除对应的文件
                        _html.remove();
                        uploadDetail.config.elem.next()[0].value = ‘‘;
                    })
                    view.append(_html);
                });
            }
            , auto: false//false将不触发before
            //, bindAction: "#uploadBtn"
            , size: 300//单位kb
            , done: function (data) {
                if (data.message != "") {
                    layer.msg(data.message);
                }

                if (data.type == 1) {
                    var fileUrl = data.resultdata;
                    $("input[name=‘mainPic‘]").val(fileUrl);
                }
                else if (data.type == 3) {
                    return false;
                }
            }
            , progress: function (n, elem) {
                var percent = n + ‘%‘ //获取进度百分比
                element.progress(‘lodingdemo‘, percent); //可配合 layui 进度条元素使用
            }
        });
        var uploadDetail;
        //拖拽上传
        uploadDetail = upload.render({
            elem: ‘#upDiv2‘
            , url: ‘/UploadFile/UploadImg‘ //改成您自己的上传接口
            , choose: function (obj) {//选择图片后触发
                var files = this.files = obj.pushFile();//每次会把新图片加入集合
          //-----------------图片数量限制
var filecount = Object.getOwnPropertyNames(files).length;//这里就不说,做图片数量限制 if (filecount > 4) { layer.msg("只能上传4张"); var fileobj = Object.getOwnPropertyNames(files)// $(fileobj).each(function (i, j) {//删除本次添加的图片,不删的话 if (i > 3) { delete files[j]; } }) return false; }
          //----------------------------
var view2 = layui.$(‘#uploadDemoView2‘); //预读本地文件示例 obj.preview(function (index, file, result) { var _html = $([‘<div class="divimg" style="float:left;">‘ , ‘<img style="max-width: 196px;max-height:200px" id="viewImg‘ + index + ‘" alt="上传成功后渲染" src="‘ + result + ‘">‘ , ‘<div class="divX" >‘ , ‘<img src = "/Content/images/ui_close.png" width = "20" height = "20" />‘ , ‘</div>‘ , ‘</div>‘].join(‘‘)); view2.removeClass(‘layui-hide‘); _html.find(".divX").on(‘click‘, function () { debugger; delete files[index]; //删除对应的文件 _html.remove(); uploadDetail.config.elem.next()[0].value = ‘‘; }) view2.append(_html); }); } , multiple: true // , number: 4//这个是限制一次性选择4张图片 反正就不能用,没卵用 , auto: false//false将不触发before , size: 300//单位kb , done: function (data) { if (data.message != "") { layer.msg(data.message); } if (data.type == 1) { var fileUrl = data.resultdata; $("input[name=‘detailPic‘]").val(fileUrl); } else if (data.type == 3) { return false; } } //, error: function (index, upload) { // //当上传失败时,你可以生成一个“重新上传”的按钮,点击该按钮时,执行 upload() 方法即可实现重新上传 //} , progress: function (n, elem) { var percent = n + ‘%‘ //获取进度百分比 element.progress(‘lodingdemo2‘, percent); //可配合 layui 进度条元素使用 } }); $("#uploadBtn").click(function () { uploadMain.upload(); uploadDetail.upload(); return false; }) //自定义验证规则
//监听提交 //表单取值 });
<style type="text/css">
    .divX {
        position: absolute;
        top: 0px;
        right: 0px;
        text-align: right;
        padding-right: 3px;
        z-index: 200;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        line-height: 10px;
        font-weight: bold;
        cursor: pointer;
        font-size: 10px;
    }

    .divimg {
        max-height: 220px;
        height: 220px;
        width: 258px;
        max-width: 258px;
        background-color: #fff;
        border: 1px dashed #e6e6e6;
        position: relative;
        text-align: center;
    }

        .divimg > img {
            padding-top: 10px;
        }
</style>
<form class="layui-form layui-form-pane" lay-filter="example">
    <input type="hidden" name="mainPic" />
    <input type="hidden" name="detailPic" />
   
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-normal layui-btn-radius" id="uploadBtn" lay-submit="">开始上传</button>
    </div>
    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>上传主图(300kb内)</legend>
        </fieldset>

        <div class="layui-upload-drag" id="test10">
            <div class="layui-progress" lay-filter="lodingdemo" lay-showpercent="true">
                <div class="layui-progress-bar" lay-percent="0%"></div>
            </div>
            <i class="layui-icon"></i>
            <p>点击上传,或将文件拖拽到此处</p>
            <hr />

        </div>
        <div class="layui-hide" id="uploadDemoView">
            @*<img style="max-width: 196px;max-height:200px" id="demo2" alt="上传成功后渲染" lay-filter="imgfilter" src="">
                <div class="divX " onclick="del(this)">
                    <img src="~/Content/images/ui_close.png" width="20" height="20" />
                </div>*@
        </div>
    </div>
    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>上传详情页(300kb内,最多4张)</legend>
        </fieldset>

        <div class="layui-upload-drag" id="upDiv2">
            <div class="layui-progress" lay-filter="lodingdemo2" lay-showpercent="true">
                <div class="layui-progress-bar" lay-percent="0%"></div>
            </div>
            <i class="layui-icon"></i>
            <p>点击上传,或将文件拖拽到此处</p>
            <hr>
        </div>
        <div class="layui-hide" id="uploadDemoView2">
        </div>
    </div>
</form>

 

以上是关于layui的图片上传使用的主要内容,如果未能解决你的问题,请参考以下文章

LayUI上传图片

LayUI上传图片

LayUI上传图片

layui 上传图片 实现过程

layui的上传图片

layui多图片怎么按名称顺序上传