localfile.jsp 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. <!DOCTYPE HTML>
  2. <%@ page language="java" pageEncoding="UTF-8" import="java.util.*" contentType="text/html; charset=UTF-8"%>
  3. <%@include file="/jsp/framework/head.jsp"%>
  4. <%@ taglib uri="/WEB-INF/hnisi.tld" prefix="hnisi"%>
  5. <%
  6. String sdzlid = (DTOUtil.getValue("sdzlid") == ""? "" : DTOUtil.getValue("sdzlid"));
  7. String sdjlid = (DTOUtil.getValue("sdjlid") == ""? "" : DTOUtil.getValue("sdjlid"));
  8. Map dataMap = new HashMap();
  9. dataMap = (Map) DTOUtil.getData().get("dataMap") == null?null:(Map) DTOUtil.getData().get("dataMap");
  10. final String putObjectUrl = ConfUtil.getParam("GGFW_WJFW_UPLOAD_URL");
  11. final String usertoken=(String)request.getSession().getAttribute("usertoken");
  12. %>
  13. <html>
  14. <style>
  15. html,body{
  16. width: 100%;
  17. height: 100%;
  18. margin: 0;
  19. padding: 0;
  20. }
  21. .div-default:active, .div-default:hover {
  22. background-color:#FFFACD;
  23. }
  24. .zllb-div1{
  25. padding: 10px 5px 10px 5px;
  26. background: #fbfbfb;
  27. border-top: 1px solid #efefef;
  28. border-bottom: 1px solid #efefef;
  29. }
  30. .zllb-div2{
  31. padding: 10px 5px 10px 5px;
  32. background: #fff;
  33. border-top: 1px solid #fff;
  34. border-bottom: 1px solid #fff;
  35. }
  36. .div-on {
  37. background-color:#FFFACD;
  38. border-color: #8c8c8c;
  39. color: #8c8c8c;
  40. }
  41. .imgcard {
  42. float: left;
  43. position: relative;
  44. border: 1px solid #ccc;
  45. padding-bottom: 5px;
  46. float: left;
  47. margin-right: 10px;
  48. margin-bottom: 10px;
  49. }
  50. .imgcard .title {
  51. text-align: center;
  52. }
  53. </style>
  54. <head lang="zh-cn">
  55. <meta charset="utf-8">
  56. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  57. <meta name="viewport" content="width=device-width,initial-scale=1">
  58. <title>本地上传</title>
  59. </head>
  60. <body>
  61. <div id="root" style="width: 100%;height: 100%;padding:0 0 5px 0;">
  62. <div class="row" style="height:100%;margin:10px 0">
  63. <!-- 第一块资料类别 -->
  64. <div class="col col-2">
  65. <div class="section" style="width: 100%;height: 100%;">
  66. <div class="section-title">
  67. <img class="title-icon" src="${ctx}/themes/zjrs/images/title-icon.png" />
  68. <span class="section-title-text">资料类别</span>
  69. </div>
  70. <div id="zllb" class="bg_set" style="overflow:auto;">
  71. <%if(dataMap != null){
  72. List<Map<String, Object>> sdzlList = (List) dataMap.get("sdzlList");
  73. if(sdzlList != null){
  74. for(int i=0;i<sdzlList.size();i++){
  75. %>
  76. <div id="zllbdiv<%=sdzlList.get(i).get("SDZLID") %>" <%if(i%2 == 0){ %> class="zllb-div1 div-default" <%}else{ %> class="zllb-div2 div-default" <%} %> onclick="setSdzlid('<%=sdzlList.get(i).get("SDZLID")%>')">
  77. <%
  78. if("1".equals(sdzlList.get(i).get("SFBSBZ"))){
  79. %>
  80. <a style="color:red;">*</a>
  81. <%
  82. }
  83. %>
  84. <%=(String) sdzlList.get(i).get("ZLLBMC")%>(<a id="zllb<%=sdzlList.get(i).get("SDZLID") %>" style="color:blue;"><%=sdzlList.get(i).get("CNT")%></a>)
  85. </div>
  86. <%
  87. }
  88. }
  89. } %>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="col col-10">
  94. <div class="section" style="width: 100%;height: 100%;">
  95. <div class="section-title">
  96. <img class="title-icon" src="${ctx}/themes/zjrs/images/title-icon.png" />
  97. <span class="section-title-text">导入结果</span>
  98. <span class="section-title-extra-btn">
  99. <a style="color:red;">大小不超过2M,数量不超过20;导入确认无误后,请务必点击【保存】。</a>
  100. <input style="line-height:0;width:180px" type="file" id="localfile" name="localfile" multiple="multiple" accept="image/jpg, image/jpeg, image/png"/>
  101. <a class="btn btn-primary" onclick="doImportImage()">导入</a>&nbsp;
  102. <a class="btn btn-primary" onclick="doSave()">保存</a>&nbsp;
  103. <a class="btn btn-ghost" onclick="doClear()">清空</a>&nbsp;&nbsp;
  104. <a class="btn btn-primary" onclick="goBack()">返回</a>
  105. </span>
  106. </div>
  107. <div id="image_list_div" class="bg_set" style="overflow:auto;">
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </body>
  114. <script type="text/javascript">
  115. var GVAR_LOCALFILE= {
  116. "sdzlid":"<%=sdzlid%>",
  117. "sdjlid":"<%=sdjlid%>",
  118. "camidx":"0"
  119. };
  120. //如果GVAR已经定义了则追加
  121. if(GVAR){
  122. GVAR = $.extend(GVAR, GVAR_LOCALFILE);
  123. }else{
  124. var GVAR = GVAR_LOCALFILE;
  125. }
  126. var imgObj = {};//拍摄照片结果
  127. var imgCnt = 0;//拍摄照片计数
  128. var imgSaveCnt = 0;//保存照片计数
  129. //初始化界面
  130. $(function(){
  131. //计算高度
  132. var distance = document.documentElement.clientHeight;
  133. var divHeight = distance-62;
  134. document.getElementById("zllb").style.height= divHeight + "px";//左侧div
  135. document.getElementById("image_list_div").style.height= divHeight + "px";//右侧div
  136. var sdzlid = "<%=sdzlid%>";
  137. if(sdzlid.length > 0){
  138. //默认选中传参sdzl
  139. setSdzlid(sdzlid);
  140. }
  141. });
  142. //切换收单资料id
  143. function setSdzlid(sdzlid){
  144. //div增加选中样式
  145. var div = document.getElementById("zllbdiv"+sdzlid);
  146. div.className += ' div-on';
  147. if(GVAR.sdzlid != sdzlid && GVAR.sdzlid != ""){
  148. var divdel = document.getElementById("zllbdiv"+GVAR.sdzlid);
  149. var classVal = divdel.getAttribute("class");
  150. classVal = classVal.replace(" div-on","");
  151. divdel.setAttribute("class",classVal);
  152. }
  153. GVAR.sdzlid = sdzlid;
  154. }
  155. //导入
  156. function doImportImage(){
  157. var files = document.getElementById("localfile").files;
  158. if(files.length > 0){
  159. if(files.length > 20){
  160. alert("文件数量不可超过20!");
  161. return;
  162. }
  163. var msg = "";
  164. var filemaxsize = 1024 * 1024 * 2;//2M
  165. for(var i=0;i<files.length;i++){
  166. //大小 字节 files[0].size
  167. if(files[i].size > filemaxsize){
  168. msg += files[i].name+"文件大小不能大于2M;";
  169. continue;
  170. }
  171. //判断类型files[0].type
  172. var fileType = files[i].type;
  173. if(fileType.indexOf("jpg") < 0 && fileType.indexOf("jpeg")<0 && fileType.indexOf("png")< 0){
  174. msg += files[i].name+"文件类型不符合(.jpg|.jpeg|.png);";
  175. continue;
  176. }
  177. var oFReader = new FileReader();
  178. var file = files[i];
  179. oFReader.readAsDataURL(file);
  180. oFReader.onloadend = function(oFRevent){
  181. var src = oFRevent.target.result;
  182. var base64 = src.substring(src.indexOf(",")+1);
  183. //保存数据到图片集
  184. imgCnt++;
  185. imgSaveCnt++;
  186. var imgKey = "img" + imgCnt;
  187. imgObj[imgKey] = base64;
  188. var html = '<div class="imgcard">' +
  189. '<img id="'+imgKey+'" src="data:image/jpeg;base64,' + base64 +
  190. '" style="width:200px;height: 180px;" />' +
  191. "</div>";
  192. $("#image_list_div").append(html);
  193. }
  194. }
  195. if(msg != ""){
  196. alert(msg);
  197. }
  198. var localfile = document.getElementById('localfile');
  199. localfile.outerHTML = localfile.outerHTML;
  200. }else{
  201. alert("请选择文件!");
  202. }
  203. }
  204. //返回
  205. function goBack(){
  206. var title=encodeURIComponent('收单页面');
  207. window.location.href = "${ctx}/shoudan/web/mainview/mainview.do?title="+title+"&sdzlid="+ GVAR.sdzlid +"&sdjlid="+GVAR.sdjlid;
  208. }
  209. //清空
  210. function doClear(){
  211. document.getElementById("image_list_div").innerHTML = "";
  212. imgObj = {};//拍摄照片结果
  213. imgCnt = 0;//拍摄照片计数
  214. imgSaveCnt = 0;//保存照片计数
  215. }
  216. //保存
  217. function doSave(){
  218. if(imgSaveCnt > 0){
  219. var url = "<%=putObjectUrl%>";
  220. var token = "<%=usertoken%>";
  221. if(CFW.oValid.fnIsNull(token)){
  222. alert("系统登录超时,上传失败,请重新登录后上传!");
  223. return;
  224. }
  225. var tyccids = putFiles(url,token);
  226. var mParams={
  227. sdzlid:GVAR.sdzlid,
  228. tyccids:tyccids
  229. };
  230. CFW.oAJax.doService("mainviewService.saveSdzlmx", mParams, '正在上传资料信息...',
  231. function(mData) {
  232. if(mData[0].FLAG=="1"){
  233. alert("保存成功!");
  234. //更新资料类别总数
  235. var cnt = document.getElementById("zllb"+GVAR.sdzlid).innerHTML;
  236. var zlmxCnt = parseInt(cnt) + imgSaveCnt;
  237. document.getElementById("zllb"+GVAR.sdzlid).innerHTML = zlmxCnt;
  238. doClear();
  239. }else{
  240. alert("保存失败!");
  241. }
  242. }
  243. );
  244. }else{
  245. alert("请导入需要保存的文件!");
  246. }
  247. }
  248. //文件上传,返回统一存储ID
  249. function putFiles(url,token){
  250. var tyccids = "";
  251. for(var i=0;i<imgSaveCnt;i++){
  252. var formdata = new FormData();
  253. var imgindex=i+1;
  254. const blob = base64ToBlob("data:image/jpeg;base64,"+imgObj["img"+imgindex]);
  255. const file = blobToFile(blob, "img"+imgindex+".jpg");
  256. formdata.append('file', file, "img"+imgindex+".jpg");
  257. formdata.append('business', 'business1');
  258. var tyccid = putObject(url,token,formdata);
  259. tyccids +=tyccid+",";
  260. }
  261. return tyccids;
  262. }
  263. </script>
  264. <script src="${ctx}/jsp/shoudan/web/mainview/js/put-object-to-fileserver.js"></script>
  265. </html>