本文主要包含HTML5,PC二维码,WAP等相关知识,匿名希望在学习及工作中可以帮助到您
讲解一篇Java代码根据参数动态生成PC二维码效果,且成功扫描并http:///php/php-tp-uploads.html" target="_blank">上传图形或视频资源的功能。
技术难度一般,关键在于如何把一整套逻辑思路整合到项目上,如果调用,应该到哪些技术,理清了交互关系,详细对于大家而言这就是一份入门级别的代码参考,以作提升。
粗略介绍一下应用到的技术问题,前端方法使用简单的html元素布局,生成<img>二维码即可,后端框架为SpringMVC,结构简单,查阅清晰,应用到的二维码Jar包为:qrcode_swetake.jar 。
一、从前端开始入手,先构建页面布局确保能够生成二维码效果:
实现出来的成型效果如上图所示,鼠标移入移出则显示隐藏二维码效果框,自行慢慢摸索CSS如何实现了,这里需要说明的是二维码只需要一句话即可动态生成。
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set> <img src="${ctx}/upload/codeImg.html?userId=${loginUserId}" />
设置一个<img>标签动态生成接收返回的二维码图,高宽度自行根据实际情况设定,然后就哔的一声手机即可访问的,当然测试阶段请确保IP同在一个局域网。
扫描出来的页面也异曲同工,关键在于你要设计成什么样子,只要能实现上传功能即可。
我应用的前端上传插件为jquery.form.js,主要JS方法如下:
<input type="file" name="tempFile" id="tempFile" accept= ".avi,.mpg,.mp4,.mov;capture=camera" onchange="previewFile('tempFile');"/> <input type="file" name="tempFile" id="tempFile" accept= "image/jpg,image/JPG,image/jpeg,image/JPEG,image/pdf,image/png;capture=camera" onchange="previewFile('tempFile');"/> <script language="javascript"> function previewFile(id){ var x = document.getElementById("tempFile"); if(!x || !x.value) return; var patn = /\.jpg$|\.JPG$|\.jpeg$|\.JPEG$|\.pdf$|\.PDF$|\.png$|\.PNG$/; var inpType = "image\/jpg,image\/JPG,image\/jpeg,image\/JPEG,image\/pdf,image\/PDF,image\/png,image\/PNG"; var type = $("#type").val(); if(type=='video'){ patn = /\.mp4$|\.MP4$|\.mov$|\.MOV$/; inpType = ".MP4,.MOV,.mp4,.mov"; } if(!patn.test(x.value)){ if(type=='video'){ alertMsg("请上传mov、mp4格式的视频"); }else{ alertMsg("请上传jpg、png、pdf格式的文件"); } }else{ initShow(); $("#uploadForm").ajaxSubmit(options); } } var options = { dataType:"json", url:'${ctx}/upload/uploadAndSaveFile.html', type:'post', contentType: "application/x-www-form-urlencoded; charset=utf-8", success:function(data) { initHide(); if(data.success){ //alertCallBack("上传成功<br/>请前往PC端刷新后查阅!",function(){ document.location.href="${ctx}/upload/toUploadEndDetail.html"; //}); }else{ alertCallBack(data.message,function(){ window.location.reload(); }); //alertMsg(data.message); } }, error :function(data){ initHide(); alertMsg(data); }, beforeSubmit:showRequest // pre-submit callback //clearForm:true }; function showRequest(formData, jqForm, options) { var queryString = $.param(formData); } </script>
以上代码由于涉及公司内部逻辑,故存在个别地方的删减动作,但整体思路已清晰罗列出来了。
这里需要讲到一个应用到的UI插件,即alertMsg使用到的hint弹出框效果。smallarAlert.js
附件资源均会统一部署上来,插件自适应效果可兼容IE、谷歌、360、火狐等主流浏览器,内置样式及功能等也可自行重写,具体应用自行度娘搜索该插件了,这里就不一一讲解了。
二、从后端着手处理二维码生成技术及资源保存动作:
/** * @Descript :生成二维码图片url * @author : Teny_lau * @CreatedTime : 2016年11月21日-下午3:44:44 * @param model * @param request * @param response */ @RequestMapping("/codeImg") public void toCodeImg(Model model, HttpServletRequest request, HttpServletResponse response) { String localIp = getInternetIp(request); String path = request.getSession().getServletContext().getContextPath(); String port = StringUtils.getNullBlankStr(request.getServerPort());// 获取服务器端口 String userId = StringUtils.getNullBlankStr(request.getParameter("userId"));//接收参数 String params = "userId=" + userId; // 字节长度须控制在124个长度以内,否则报异常数组索引值溢出 String content = localIp + ":" + port + path + "/upload/toUploadMain.html?" + params; EncoderHandler encoder = new EncoderHandler(); encoder.encoderQRCoder(content, response); } private String getInternetIp(HttpServletRequest request) { String ip = StringUtils.getNullBlankStr(request.getHeader("x-forwarded-for")); if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) { ip = StringUtils.getNullBlankStr(request.getHeader("Proxy-Client-IP")); } if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) { ip = StringUtils.getNullBlankStr(request.getHeader("WL-Proxy-Client-IP")); } if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) { ip = StringUtils.getNullBlankStr(request.getRemoteAddr());// 获取客户端IP地址 } String localIp = "";// 获取网段地址 try { InetAddress localInter = InetAddress.getLocalHost(); localIp = StringUtils.getNullBlankStr(localInter.getHostAddress()); } catch (UnknownHostException e1) { e1.printStackTrace(); } if (!ip.equals(localIp) && !"127.0.0.1".equals(ip)) { // 当程序获取非服务器网口时,自动重置为本地网口 ip = localIp; } if ("127.0.0.1".equals(ip)) { // 根据网卡取本机配置的IP InetAddress inet = null; try { inet = InetAddress.getLocalHost(); } catch (Exception e) { e.printStackTrace(); } ip = StringUtils.getNullBlankStr(inet.getHostAddress()); } // 对于通过多个代理的情况,第一个IP为客户端真实IP,多个IP按照','分割 if (ip != null && ip.length() > 15) { // "***.***.***.***".length() = 15 if (ip.indexOf(",") > 0) { ip = ip.substring(0, ip.indexOf(",")); } } return ip; } /** * 提交资源信息 * * @param model * @param request * @return */ @RequestMapping("uploadAndSaveFile") @ResponseBody public void uploadAndSaveFile(HttpServletRequest request, HttpServletResponse response) { Map<String, Object> result = new HashMap<String, Object>(); try { String type = StringUtils.getNullBlankStr(request.getParameter("type")); saveUploadFile(request); result.put("success", true); } catch (RuntimeException run) { result.put("success", false); result.put("message"