certificateAdd.jsp 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/webpage/include/taglib.jsp"%>
  3. <html>
  4. <head>
  5. <title>人员证书信息管理</title>
  6. <meta name="decorator" content="default"/>
  7. <style type="text/css">
  8. img{width: 50px;height: 50px;}
  9. </style>
  10. <script type="text/javascript">
  11. $(function () {
  12. laydate.render({
  13. elem: '#getDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
  14. event: 'focus' //响应事件。如果没有传入event,则按照默认的click
  15. });
  16. laydate.render({
  17. elem: '#endDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
  18. event: 'focus' //响应事件。如果没有传入event,则按照默认的click
  19. });
  20. })
  21. //上传证书
  22. function this_upload_image_button(index){
  23. $("#this_upload_file_"+index).click();
  24. }
  25. function this_upload_show_image(index){
  26. var obj =$("#this_upload_file_"+index)[0].files[0];
  27. var fileType = obj.type;
  28. var url ;
  29. if(fileType.endsWith("png")||fileType.endsWith("bmp")||fileType.endsWith("jpg")||fileType.endsWith("jpeg")||fileType.endsWith("gif")){
  30. url = window.URL.createObjectURL(obj);
  31. }else {
  32. //需要置空
  33. var file = $("#this_upload_file_"+index);
  34. file.after(file.clone().val(""));
  35. file.remove();
  36. top.layer.alert('请上传*.png,*.bmp,*.jpg/jpeg格式的图片',{icon:0,title:'系统提示'});
  37. return false ;
  38. }
  39. $("#this_upload_image_"+index).attr("src",url);
  40. var length = $("#this_upload_image_div :file").length;
  41. if( index == length && length < 1 ){
  42. this_upload_image_append(index);
  43. this_add_x(index);
  44. }else if(index == length && length ==1){
  45. 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>';
  46. $("#this_upload_image_1").before(span);
  47. //由于限制了只上传一张图片,此时在替换图片操作后会出现多个"id=this_upload_close_1"的"x"
  48. $("span[id^=this_upload_close_1]").each(function (i,n) {
  49. if(i>0){
  50. $(n).remove();
  51. }
  52. })
  53. }
  54. }
  55. function this_upload_image_append(index){
  56. var div1 = "<div id='this_upload_div_"+(index+1)+"' style='float:left;position:relative;width: 57px;height: 57px;'>";
  57. 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;"/>';
  58. 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>';
  59. var div2 = "</div>";
  60. $("#this_upload_image_div").append(div1+img+input+div2);
  61. }
  62. function this_close_img(index) {
  63. $("#this_upload_div_"+index).remove();
  64. var length = $("#this_upload_image_div :file").length;
  65. if(length == 0){
  66. this_add_div();
  67. }else if(length == 1){
  68. var x = $("#this_upload_image_div").find("span").text();
  69. if("x" != x){
  70. this_add_div();
  71. }
  72. }
  73. }
  74. function this_add_x(index) {
  75. 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>';
  76. $("#this_upload_image_div").find("img:eq(-2)").before(span);
  77. }
  78. function this_add_div() {
  79. var this_upload_div_1 =
  80. '<div id="this_upload_div_1" style="float: left;position:relative;width: 57px;height: 57px;" >'+
  81. '<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)"/>'+
  82. '<input id="this_upload_file_1" type="file" style="display:none" name="this_upload_files" onchange="this_upload_show_image(1)" /><br>'+
  83. '</div>';
  84. $("#this_upload_image_div").html("").append(this_upload_div_1);
  85. }
  86. </script>
  87. </head>
  88. <body class="hideScroll">
  89. <form:form id="inputForm" modelAttribute="certificate" enctype="multipart/form-data" class="form-horizontal">
  90. <input type="hidden" name="userInfoId" value="${requestScope.userInfoId}"/>
  91. <input type="hidden" name="userId" value="${requestScope.userId}"/>
  92. <sys:message content="${message}"/>
  93. <table class="table table-bordered table-condensed dataTables-example dataTable no-footer">
  94. <tbody>
  95. <tr>
  96. <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书名称:</label></td>
  97. <td class="width-35">
  98. <form:input path="name" htmlEscape="false" class="form-control required"/>
  99. </td>
  100. <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书编号:</label></td>
  101. <td class="width-35">
  102. <form:input path="number" htmlEscape="false" class="form-control required"/>
  103. </td>
  104. </tr>
  105. <tr>
  106. <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书专业:</label></td>
  107. <td class="width-35">
  108. <form:input path="profession" htmlEscape="false" class="form-control required"/>
  109. </td>
  110. <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书等级:</label></td>
  111. <td class="width-35">
  112. <form:input path="level" htmlEscape="false" class="form-control required"/>
  113. </td>
  114. </tr>
  115. <tr>
  116. <td class="width-15 active"><label class="pull-right"><font color="red">*</font>取得日期:</label></td>
  117. <td class="width-35">
  118. <input id="getDate" name="getDate" type="text" maxlength="20" class="laydate-icondate form-control layer-date required"
  119. value="<fmt:formatDate value="${certificate.getDate}" pattern="yyyy-MM-dd"/>"/>
  120. </td>
  121. <td class="width-15 active"><label class="pull-right"><font color="red">*</font>证书有效期:</label></td>
  122. <td class="width-35">
  123. <input id="endDate" name="endDate" type="text" maxlength="20" class="laydate-icondate form-control layer-date required"
  124. value="<fmt:formatDate value="${certificate.endDate}" pattern="yyyy-MM-dd"/>"/>
  125. </td>
  126. </tr>
  127. <tr>
  128. <td class="width-15 active"><label class="pull-right"><font color="red">*</font>上传证书:</label></td>
  129. <td class="width-35" colspan="3">
  130. <div style="float: right">
  131. <span id="this_upload_msg">请上传*.png,*.bmp,*.jpg/jpeg,*.gif格式的图片</span><br>
  132. <div id="this_upload_image_div">
  133. <div id="this_upload_div_1" style="float: left;position:relative;width: 57px;height: 57px;">
  134. <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)"/>
  135. <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>
  136. </div>
  137. </div>
  138. </div>
  139. </td>
  140. </tr>
  141. </tbody>
  142. </table>
  143. </form:form>
  144. </body>
  145. </html>