• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 使用HTML5实现扫描PC二维码且触发WAP端上传资源功能的示例代码

使用HTML5实现扫描PC二维码且触发WAP端上传资源功能的示例代码

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,PC二维码,WAP等相关知识,匿名希望在学习及工作中可以帮助到您
讲解一篇Java代码根据参数动态生成PC二维码效果,且成功扫描并http:///php/php-tp-uploads.html" target="_blank">上传图形或视频资源的功能。

技术难度一般,关键在于如何把一整套逻辑思路整合到项目上,如果调用,应该到哪些技术,理清了交互关系,详细对于大家而言这就是一份入门级别的代码参考,以作提升。

粗略介绍一下应用到的技术问题,前端方法使用简单的html元素布局,生成<img>二维码即可,后端框架为SpringMVC,结构简单,查阅清晰,应用到的二维码Jar包为:qrcode_swetake.jar 。

一、从前端开始入手,先构建页面布局确保能够生成二维码效果:

1340.jpg

实现出来的成型效果如上图所示,鼠标移入移出则显示隐藏二维码效果框,自行慢慢摸索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"
  


 

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-08-06html5使用canvas画三角形
  • 2018-12-03HTML5 对各个标签的定义与规定:body
  • 2018-12-03AugularJS基础入门与实践
  • 2017-08-06HTML5 canvas基本绘图之绘制五角星
  • 2018-12-03关于简单动画的10篇课程推荐
  • 2018-12-03HTML5 canvas绘图基本详解
  • 2018-12-03HTML5中div标签的实例代码
  • 2018-12-03Web App 开发使用哪种框架比较好?
  • 2018-12-03怎么制作一个H5响应式网站?
  • 2018-12-03H5横竖屏检测的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详细解读HTML5标签使用方法
    • HTML5 Video标签的属性、方法和事件汇总介绍
    • 实践HTML5的CSS3Media Queries的示例代码分享
    • H5在Canvas中实现自定义路径动画
    • 利用Html5实现文件异步上传功能代码实例
    • HTML5的hidden属性兼容老浏览器的方法_html5教程技巧
    • CSS+HTML5的使用方法实例
    • 什么是Websocket?解析h5中的Websocket
    • HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接
    • HTML5游戏框架cnGameJS开发实录-精灵对象篇

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有