layui文件上传支持预览大图，

 

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-row" id="demo2"></div>
                </blockquote>
            </div>
            <script>
                //<![CDATA[
                layui.use(['upload', 'element', 'layer'], function () {
                    var $ = layui.jquery
                        , upload = layui.upload
                        , element = layui.element
                        , layer = layui.layer;

                    let imgIndex = -1;
                    //预读本地文件示例，不支持ie8
                    const data = [];
                    //多图片上传
                    var uploadListIns = upload.render({
                        elem: '#test2'
                        , url: 'https://httpbin.org/post' //此处配置你自己的上传接口即可
                        , elemList: $('#demo2') //列表元素对象
                        , multiple: true
                        , auto: false
                        , bindAction: '#testListAction'
                        , choose: function (obj) {
                            const that = this;
                            //将每次选择的文件追加到文件队列
                            const files = this.files = obj.pushFile();
                            const photos = {
                                'title': '预览图',
                                'id': 222,
                            }
                            obj.preview(function (index, file, result) {
                                imgIndex = imgIndex + 1
                                data.push({'src': result, 'alt': file.name})
                                photos.data = data;

                                //'<img class="layui-upload-img" id="demo1" src="' + result + '"/>' +
                                const html = $([
                                    '<div class="img-c layui-col-xs3" style="margin-top:15px">' +
                                    '<img class="layui-upload-img" layer-src="' + result + '" src="' + result + '" />' +
                                    '<div class="layui-row">' +
                                    '<div class="layui-progress" lay-showpercent="yes" style="width: 100px;margin-top:5px" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div>' +
                                    '</div>' +
                                    '<div class="layui-row" id ="operation-' + index + '">' +
                                    '<a href="#" class="img-del layui-btn layui-btn-sm layui-btn-danger" style="margin-top:5px">删除</a>' +
                                    '<a href="#" index = "' + (imgIndex) + '" class="img-show layui-btn layui-btn-sm layui-btn-normal" style="margin-top:5px">查看</a>' +
                                    '</div>' +
                                    '</div>'].join(''));

                                //单个查看
                                html.find('.img-show').on('click', function () {
                                    debugger;
                                    photos.start = $(this).attr("index")
                                    layer.photos({
                                        photos: photos
                                        , closeBtn: 1
                                        , anim: 5
                                    });
                                });

                                //删除
                                html.find('.img-del').on('click', function () {
                                    delete files[index]; //删除对应的文件
                                    html.remove();
                                    //清空 input file 值，以免删除后出现同名文件不可选
                                    //uploadListIns.config.elem.next()[0].value = '';
                                });
                                that.elemList.append(html);
                                //$('#demo2').append( html)
                                element.render('progress'); //渲染新加的进度条组件
                            });
                        }, before: function (obj) {
                            element.progress('progress-demo', '0%'); //进度条复位
                            layer.msg('上传中', {icon: 16, time: 0});
                        }
                        , done: function(res, index, upload){
                            var div = this.elemList.find('div#operation-'+ index)
                            div.remove();
                            delete this.files[index]; //删除文件队列已经上传成功的文件
                        },
                        allDone: function(obj){
                            obj = null;
                            layer.msg("上传完成");
                        },
                        error: function (index, upload) {
                        }
                        //进度条
                        , progress: function (n, elem, e, index) {
                            element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
                        }
                    });
                })
                //]]>
            </script>

 

效果图

查看大图