123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <%@ page contentType="text/html;charset=UTF-8" %>
- <%@ include file="/webpage/include/taglib.jsp"%>
- <html>
- <head>
- <title>人员证书信息管理</title>
- <meta name="decorator" content="default"/>
- <style type="text/css">
- img{width: 50px;height: 50px;}
- </style>
- <script type="text/javascript">
- $(function () {
- laydate.render({
- elem: '#getDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
- event: 'focus' //响应事件。如果没有传入event,则按照默认的click
- });
- laydate.render({
- elem: '#endDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
- event: 'focus' //响应事件。如果没有传入event,则按照默认的click
- });
- })
- //上传证书
- function this_upload_image_button(index){
- $("#this_upload_file_"+index).click();
- }
- function this_upload_show_image(index){
- var obj =$("#this_upload_file_"+index)[0].files[0];
- var fileType = obj.type;
- var url ;
- if(fileType.endsWith("png")||fileType.endsWith("bmp")||fileType.endsWith("jpg")||fileType.endsWith("jpeg")||fileType.endsWith("gif")){
- url = window.URL.createObjectURL(obj);
- }else {
- //需要置空
- var file = $("#this_upload_file_"+index);
- file.after(file.clone().val(""));
- file.remove();
- top.layer.alert('请上传*.png,*.bmp,*.jpg/jpeg格式的图片',{icon:0,title:'系统提示'});
- return false ;
- }
- $("#this_upload_image_"+index).attr("src",url);
- var length = $("#this_upload_image_div :file").length;
- if( index == length && length < 1 ){
- this_upload_image_append(index);
- this_add_x(index);
- }else if(index == length && length ==1){
- var span = '<span id="this_upload_close_'+index+'" class="close_ico" style="cursor:pointer; position: absolute;top:-1px;right: -1px; display:inline-block;z-index:1;color: red;" onclick="this_close_img('+index+');">x</span>';
- $("#this_upload_image_1").before(span);
- //由于限制了只上传一张图片,此时在替换图片操作后会出现多个"id=this_upload_close_1"的"x"
- $("span[id^=this_upload_close_1]").each(function (i,n) {
- if(i>0){
- $(n).remove();
- }
- })
- }
- }
- function this_upload_image_append(index){
- var div1 = "<div id='this_upload_div_"+(index+1)+"' style='float:left;position:relative;width: 57px;height: 57px;'>";
- var img = '<img id="this_upload_image_'+(index+1)+'" class="upload_ico" width="50px" height="50px" onclick="this_upload_image_button('+(index+1)+')" src = "${pageContext.request.contextPath}/static/uploadify/upload_ico.png" style="cursor:pointer;"/>';
- var input = '<input id="this_upload_file_'+(index+1)+'" type="file" style="display:none;" name="this_upload_files" onChange="this_upload_show_image('+(index+1)+')" /><br>';
- var div2 = "</div>";
- $("#this_upload_image_div").append(div1+img+input+div2);
- }
- function this_close_img(index) {
- $("#this_upload_div_"+index).remove();
- var length = $("#this_upload_image_div :file").length;
- if(length == 0){
- this_add_div();
- }else if(length == 1){
- var x = $("#this_upload_image_div").find("span").text();
- if("x" != x){
- this_add_div();
- }
- }
- }
- function this_add_x(index) {
- var span = '<span id="this_upload_close_'+index+'" class="close_ico" style="cursor:pointer; position: absolute;top:-1px;right: -1px; display:inline-block;z-index:1;color: red;" onclick="this_close_img('+index+');">x</span>';
- $("#this_upload_image_div").find("img:eq(-2)").before(span);
- }
- function this_add_div() {
- var this_upload_div_1 =
- '<div id="this_upload_div_1" style="float: left;position:relative;width: 57px;height: 57px;" >'+
- '<img id="this_upload_image_1" class="upload_ico" style="cursor:pointer;" src="${pageContext.request.contextPath}/static/uploadify/upload_ico.png" onclick="this_upload_image_button(1)"/>'+
- '<input id="this_upload_file_1" type="file" style="display:none" name="this_upload_files" onchange="this_upload_show_image(1)" /><br>'+
- '</div>';
- $("#this_upload_image_div").html("").append(this_upload_div_1);
- }
- </script>
- </head>
- <body class="hideScroll">
- <form:form id="inputForm" modelAttribute="certificate" enctype="multipart/form-data" class="form-horizontal">
- <input type="hidden" name="userInfoId" value="${requestScope.userInfoId}"/>
- <input type="hidden" name="userId" value="${requestScope.userId}"/>
- <sys:message content="${message}"/>
- <table class="table table-bordered table-condensed dataTables-example dataTable no-footer">
- <tbody>
- <tr>
- <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书名称:</label></td>
- <td class="width-35">
- <form:input path="name" htmlEscape="false" class="form-control required"/>
- </td>
- <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书编号:</label></td>
- <td class="width-35">
- <form:input path="number" htmlEscape="false" class="form-control required"/>
- </td>
- </tr>
- <tr>
- <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书专业:</label></td>
- <td class="width-35">
- <form:input path="profession" htmlEscape="false" class="form-control required"/>
- </td>
- <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书等级:</label></td>
- <td class="width-35">
- <form:input path="level" htmlEscape="false" class="form-control required"/>
- </td>
- </tr>
- <tr>
- <td class="width-15 active"><label class="pull-right"><font color="red">*</font>取得日期:</label></td>
- <td class="width-35">
- <input id="getDate" name="getDate" type="text" maxlength="20" class="laydate-icondate form-control layer-date required"
- value="<fmt:formatDate value="${certificate.getDate}" pattern="yyyy-MM-dd"/>"/>
- </td>
- <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书有效期:</label></td>
- <td class="width-35">
- <input id="endDate" name="endDate" type="text" maxlength="20" class="laydate-icondate form-control layer-date required"
- value="<fmt:formatDate value="${certificate.endDate}" pattern="yyyy-MM-dd"/>"/>
- </td>
- </tr>
- <tr>
- <td class="width-15 active"><label class="pull-right"><font color="red">*</font>上传证书:</label></td>
- <td class="width-35" colspan="3">
- <div style="float: right">
- <span id="this_upload_msg">请上传*.png,*.bmp,*.jpg/jpeg,*.gif格式的图片</span><br>
- <div id="this_upload_image_div">
- <div id="this_upload_div_1" style="float: left;position:relative;width: 57px;height: 57px;">
- <img alt="_blank" id="this_upload_image_1" class="upload_ico" style="cursor:pointer;" src="${pageContext.request.contextPath}/static/uploadify/upload_ico.png" onclick="this_upload_image_button(1)"/>
- <input id="this_upload_file_1" type="file" style="display:none" name="this_upload_files" onchange="this_upload_show_image(1)" class="form-control required" /><br>
- </div>
- </div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </form:form>
- </body>
- </html>
|