- <%@ 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>
随笔记
来源: http://www.bubuko.com/infodetail-3433991.html