随笔记

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Cert_ment_more_admin.ascx.cs" Inherits="AnyWise.MainSite.Portals.splitting.Cert_ment_more_admin" %>
<%--<link href="/Portals/splitting/css/cert_ment_admin.css" rel="stylesheet" />--%>

<%--个人中心：证书管理批量管理组件——界面交互开发--%>
<div id="cert_ment_admin">
    <div class="cert_name">
        <strong>批量管理证书</strong>
    </div>
    <div class="cert_cover">
        <ul>
            <asp:Repeater ID="cert_List" runat="server">
                <ItemTemplate>
                    <li>
                        <div class="pic_cover">
                            <img src="<%#Eval("paperpic") %>" alt="证书封皮" />
                            <span class="close" data-id='<%#Eval("nodeId") %>'></span>
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </div>
    <%--添加证书--%>
    <div class="cert_name">
        <strong>添加证书</strong>
    </div>
    <div class="cert_type">
        <ul class="cert_list" id="an94">
            <li>
                <label for="cert_type">证书类型：</label>
                <asp:DropDownList ID="cert_type" ClientIDMode="Static" runat="server"></asp:DropDownList>
            </li>
            <li>
                <label for="cert_up">附件上传：</label>
                <a href="javascript:;" class="a-upload">
                    <asp:FileUpload runat="server" ClientIDMode="Static" ID="upload" multiple="multiple" accept="image/gif,image/png,image/jpeg,image/jpg" />文件选择
                </a>
            </li>
            <li>
                <label for="cert_pre">附件预览：</label>
                <ul class="cert_preview" id="cert_preview">
                </ul>
            </li>
        </ul>
        <%--确定取消按钮--%>
        <div class="cert_btn">
            <asp:Button CssClass="cert_submit" Text="保存" runat="server" ID="saveBtn" ClientIDMode="Static" OnClick="saveBtn_Click" />
            <input class="cert_cancel" type="button" name="name" value="取消" />
        </div>
    </div>
</div>
<!--证书编号数据修改格式[{"picName":"1.png","type":"通用类型证书","picNum":"1234567890","picStreams":""}]-->
<asp:HiddenField ID="hd_certNum" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="hd_operareState" runat="server" ClientIDMode="Static" />
<script>
    $(function () {
        $("#saveBtn").click(function () {
            var arrNum = [];
            $("#cert_preview >li").each(function () {
                var data = {};
                //证书的名称
                data.picName = $(this).children("div").find("img").attr("alt");
                //证书的额类型
                data.type = $(this).children("div").find("img").attr("data-type");
                //证书的编号
                data.picNum = $(this).children("div").find("input").val();
                //证书的base64编码
                data.picStream = $(this).children("div").find("img").attr("src");
                arrNum.push(data);
            });
            $("#hd_certNum").val(JSON.stringify(arrNum));
            //判断是否上传成功1代表成功，0代表失败；
            var rest = $("#hd_operareState").val();
                if (rest == 1) {
                    pop("保存成功");
                } else {
                    pop("保存失败");
                }
        });
        //提示框
                function pop(msg) {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            title: "提示",
                            type: 0,
                            area: ['350px', 'auto'],
                            content: msg,
                            btn: ['确定'],
                            closeBtn: 0
                        });
                    });
                }
        //删除当前证书封皮
        $(".close").on("click", function () {
            var nid = $(this).attr("data-id");
            var row = $(this).parent().parent();
            $.ajax({
                type: "post",
                url: "/Portals/pages/talent/personSpace.aspx/Del_Node",
                //data: JSON.stringify(obj),
                data: "{ 'nid': '" + nid + "'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (data.d == 1) {
                        row.remove();
                        alert("删除成功");
                    } else {
                        alert("删除失败")
                    }
                },
                error: function (data) {
                    alert("请求失败");
                }

            })
        })

        //添加证书预览
        function ReSizePic(ThisPic) {
            var RePicWidth = 200; //这里修改为您想显示的宽度值
            var TrueWidth = ThisPic.width; //图片实际宽度
            var TrueHeight = ThisPic.height; //图片实际高度
            if (TrueWidth > TrueHeight) {
                //宽大于高
                var reWidth = RePicWidth;
                ThisPic.width = reWidth;
                //垂直居中
                var nowHeight = TrueHeight * (reWidth / TrueWidth);
                return nowHeight;  //将图片修改后的高度返回，供垂直居中用
            } else {
                //宽小于高
                var reHeight = RePicWidth;
                ThisPic.height = reHeight;
            }
        }
        var input = document.getElementById("upload");
        var result, fd, dataArr = [];
        if (typeof FileReader === 'undefined') {
            alert("抱歉，你的浏览器不支持 FileReader");
            input.setAttribute('disabled', 'disabled');
        } else {
            input.addEventListener('change', readFile, false);
        }//handler


        function readFile() {
            fd = new FormData();
            var iLen = this.files.length;
            for (var i = 0; i < iLen; i++) {
                if (!input['value'].match(/.jpg|.gif|.png|.jpeg/i)) {　　//判断上传文件格式
                    return alert("上传的图片格式不正确，请重新选择");
                }
                var reader = new FileReader();
                fd.append(i, this.files[i]);
                reader.readAsDataURL(this.files[i]);  //转成base64
                reader.fileName = this.files[i].name;
                //排除重复
                var pinarr = [];
                $("#cert_preview img").each(function () {
                    pinarr.push($(this).attr('alt'));
                });
                if (pinarr.indexOf(reader.fileName) != -1) {
                    alert("已经存在")
                    return false;
                }
                reader.onload = function (e) {
                    var imgMsg = {
                        name: this.fileName,//获取文件名
                        base64: this.result   //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
                    }
                    dataArr.push(imgMsg);
                    var datatype = $("#cert_type").val();
                    result = '<div class="pic_cover">
                            <img class="subPic" data-type="'+ datatype + '" src="' + this.result + '" alt="' + this.fileName + '"/>
                            <span class="close"></span>
                            <div>
                            <label for="">证书编号：</label>
                           <input type="text" autocomplete="off" class="cert_num" id="" name="cert_num" placeholder="请输入证书编号" required="required" value="" />
                          </div></div>';
                    var li = document.createElement('li');
                    li.innerHTML = result;
                    document.getElementById("cert_preview").appendChild(li);  　　//插入dom树
                    //删除当前证书封皮
                    $(".close").on("click", function () {
                        $(this).parent().parent().remove();
                    });

                }
            }
        }
    })
</script>