选择图片 ，并上传，可以传多个图片，需要导入layui框架

选择图片 并上传

var layui = layui.config({
			base: '../../layuiadmin/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(['laydate', 'index', 'form', 'table', 'layer', 'tree'], function () {
			var laydate = layui.laydate;
			var $ = layui.$,
				admin = layui.admin,
				layer = layui.layer,
				laydate = layui.laydate,
				element = layui.element,
				tree = layui.tree,
				form = layui.form; //表单

			//屏幕分辨率高宽
			var heigit = window.screen.availHeight;
			var width = window.screen.width;
			var Role;
			RoleMenu();
		});

   <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="test-upload-testList">选择文件</button>
                    <span style="color: red">图片上传不超过2M</span>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>预览</th>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="test-upload-demoList"></tbody>
                        </table>
                        <!--<input type="file" hidden name="file" id="up-file">-->
                    </div>
                    <button type="submit" class="layui-btn" id="test-upload-testListAction">开始上传</button>
                </div>
            </div>
        </div>
    </div>

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

            $('#pid').val(xgweb.getQueryStringCn("Pid"));
            $('#PropertyNO').val(xgweb.getQueryStringCn("Pno"));

            var Pid=xgweb.getQueryStringCn("Pid");
            var Pno=xgweb.getQueryStringCn("Pno");


            //多文件列表示例
            var demoListView = $('#test-upload-demoList')
                ,uploadListIns = upload.render({
                elem: '#test-upload-testList'
                ,crossDomain: true
                ,accept: 'images'
                ,multiple: true
                ,auto: false
                //,field:'file'+index
                //,data:{PropertyID:Pid,PropertyNO:Pno}//房源参数
                ,choose: function(obj){
                    var files = this.files = obj.pushFile();//将每次选择的文件追加到文件队列
                    //文件
                    obj.preview(function(index, file, result){

                        //读取本地
                        if(file.size >1024*2*1024){

                            delete files[index];

                            layer.msg("图片【"+file.name+'】文件超过2M,请调整大小在上传', {icon: 5});  //layui弹出层

                        }else {

                            var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td><a href="'+result+'" οnclick="OpenFullSizeWindow(this.href);return false"><img src="'+ result +'" alt="'+ file.name +'" ></a></td>'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));
                        }

                        //删除
                        tr.find('.test-upload-demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
            });

 $("form").submit(function () {
                var loadup=  layer.load(0);
                var x=document.getElementsByTagName("tr");

                var ptype=$('#Phototype').val();

                if(ptype=='封面'&&x.length>4){
                    // alert("封面图片不能超过3张")
                    layer.close(loadup);
                    return false;
                }
                if (x.length >1) {
                    var formData = new FormData(this);
                    $.ajax({
                        url: xgweb.apiAdd()+"Photo/GetAddphotomore",
                        xhrFields: {
                            withCredentials: true
                        },
                        Domain: true,
                        data: formData,
                        dataType: 'json',
                        type: 'post',
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            debugger;
                            if (res.data === "1") {
                                layer.msg(res.msg, { icon: 1, time: 1000 },function () {
                                    //关闭窗口
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    layer.close(loadup);

                                });
                            } else { layer.close(loadup);
                                layer.msg(res.msg, { icon: 2 }); }

                        }
                    });

                    return false;
                } else { layer.close(loadup); alert("请选择图片！");
                    return false;
                }
            });

        });

        function OpenFullSizeWindow(result) {
            var newwin=window.open()
            newwin.document.write("<img src="+result+" />")
            // window.open().document.write("<img src="+result+" />")
        }

样式展示