LayUI上传图片

Posted 2023-02-15 屎涂行者

layui现学现用一段时间发现还挺好用的。对一些不复杂的功能来说还算是方便。

记录一下上传图片方式，layui集成了图片上传及预览的方式。

看看效果图

 

前端html代码，用于展示上传图片按钮及预览的位置；  还带进度条哦...

 <div class="layui-upload" style="margin-left: 110px;margin-bottom: 30px;">
            <button type="button" class="layui-btn" id="uploadImg">上传图片</button>
            <div style="display:none;">
                <input type="text" name="img_url" id="ipt_fileName" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="img_id">
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="upload_filter">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

JS方面需要声明 upload 上传、下载功能

即

layui.use(['form','upload'], function () 
        var form = layui.form;
        var $ = layui.jquery
            , upload = layui.upload;
);

上传图片JS方法

        //常规使用 - 普通图片上传
        var uploadInst = upload.render(
            elem: '#uploadImg'
            , url: '上传接口'
            , before: function (obj) 
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) 
                    $('#img_id').attr('src', result); //图片
                );
                element.progress('upload_filter', '0%'); //进度条
                layer.msg('上传中',  icon: 16, time: 0 );
            
            , done: function (res) 
                if (res.code > 0) 
                    return layer.msg('上传失败');
                
                $('#demoText').html(''); //置空上传失败的状态
                $("#ipt_fileName").val(res.msg);
            
            , 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();
                );
            
            //进度条
            , progress: function (n, elem, e) 
                element.progress('upload_filter', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) 
                    layer.msg('上传完毕',  icon: 1 );
                
            
        );

HTML代码跟JS 代码是通过uploadImg 这个ID进行联系的

<button type="button" class="layui-btn" id="uploadImg">上传图片</button>

只需要实现这两步上传图片功能就已经实现了。

后端上传功能用文件流的方式保存到指定地方就可以了，这个百度上也是有很多相应的上传方法。