layui图片上传,删除功能

  <form>
        <input type="hidden" name="PropertyID" id="pid" value="" />
        <input type="hidden" name="PropertyNO" id="PropertyNO" value="" />
        <select id="Phototype" name="Phototype" lay-filter="purpose"
                lay-verify="required" hidden>
            <option value="其他" selected>其他</option>
        </select>
        <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>
    </form>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/Test/lib/jquery/1.9.1/jquery.min.js"></script>

<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../layuiadmin/layui/lay/modules/laypage.js"></script>
<script src="../../js/xgweb.js"></script>
<script>
     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 oldPhotoid=xgweb.getQueryStringCn("PhotoID");
// console.log(oldPhotoid)
            var oldPhotoid = localStorage.getItem("PhotoID")
            console.log(oldPhotoid)
            //多文件列表示例
            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){
console.log(obj)
                        //读取本地
                        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>2){
                    alert("封面图片不能超过2张")
                    layer.close(loadup);
                    return false;
                }
                if (x.length >1) {
                    var formData = new FormData(this);
                    // var oldPhotoid=xgweb.getQueryStringCn("PhotoID");
                    var oldPhotoid = localStorage.getItem("PhotoID")
                    formData.append("oldPhotoid",oldPhotoid)

                    // console.log(formData.get("oldPhotoid"));
                    if(oldPhotoid==""){
                        layer.msg("请刷新一下重新纠错")
                        return false;
                    }
                    //
                    // console.log(formData)
                    else{
                        $.ajax({
                        url: xgweb.apiAdd()+"Photo/GetUpdatephotomore",
                        xhrFields: {
                            withCredentials: true
                        },
                        Domain: true,
                        data: formData,
                        dataType: 'json',
                        type: 'post',
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            if (res.data ==1||res.data =="1") {
                                layer.msg(res.msg, { icon: 1, time: 1000 },function () {
                                    //关闭窗口
                                    DeleteOne()
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    layer.close(loadup);
                                    return false
                                });
                            } else { layer.close(loadup);
                                layer.msg(res.msg, { icon: 2 });

                            }
                            return false
                        }
                    });}

                    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+" />")
        }

        function DeleteOne() {
            var oldPhotoid = localStorage.getItem("PhotoID")
            xgweb.ajaxPost(xgweb.apiAdd()+"Photo/ImgPhotoDelete", { PhotoID: oldPhotoid }, function (data) {
                console.log(data)
                //判断
                if (data.data == "OK") {
                    layer.msg('删除成功!', { icon: 1, time: 1000 }, function () {
                        //关闭窗口
                        window.history.go(-1)
                    });

                }
                else {
                    window.history.go(-1)
                }

            });

        }
    </script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值