HTML5を使用してPCのQRコードをスキャンし、WAP側にリソースのアップロードをトリガーする機能を実装するサンプルコード

パラメータに基づいて PC QR コード効果を動的に生成し、正常にスキャンしてアップロードする Java コードを説明しますグラフィックスやビデオリソースの機能。技術的な難易度は平均的です。重要なのは、プロジェクトにどのテクノロジーを使用するか、相互関係を明確にするかです。 . これは、改善のための入門レベルのコード リファレンスです。フロントエンド メソッドは、簡単な html 要素
レイアウトを使用して を生成します。バックエンド

フレームワーク

シンプルな構造と明確なリファレンスを備えた Spring

MVC

適用される QR コード Jar パッケージは次のとおりです: qrcode_swetake.jar 1 フロントエンドから始めて、最初に ページ レイアウト を構築します。 QR コード効果が生成できることを確認します。

実現された整形効果は上の図に示すように、マウスを前後に動かすと、非表示の QR コード効果ボックスが表示されます。ここで説明する必要があるのは、QR コードを動的に生成するために必要な文は 1 つだけであるということです。 タグを設定して、返される QR コードの画像を動的に生成します。もちろん、テスト段階では、スキャンされたページも同じであることを確認してください。重要なのは、アップロード機能を実現できる限り、どのように設計するかです

私が適用したフロントエンド アップロード プラグインは jquery.form.js で、メインの JS メソッドは次のとおりです:

<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<img  src="${ctx}/upload/codeImg.html?userId=${loginUserId}" / alt="HTML5を使用してPCのQRコードをスキャンし、WAP側にリソースのアップロードをトリガーする機能を実装するサンプルコード" >

上記のコードは会社の内部ロジックに関係しているため、特定の場所で削除されていますが、全体的なアイデアは明確にリストされています

適用される UI プラグイン、つまりヒント ポップアップ ボックスの効果について説明する必要があります。プラグインのアダプティブ エフェクトは、IE、Google、360、Firefox などの主流のブラウザと互換性があります。自分で書き換えたり、特定のアプリケーションを自分で検索したりできます

これはプラグインなので、ここでは一つずつ説明しません

2. QRコード生成技術とリソース節約アクションを処理します。バックエンド:

<input type="file" name="tempFile" id="tempFile"  
    accept= ".avi,.mpg,.mp4,.mov;capture=camera" onchange="previewFile(&#39;tempFile&#39;);"/>
<input type="file" name="tempFile" id="tempFile" 
    accept= "image/jpg,image/JPG,image/jpeg,image/JPEG,image/pdf,image/png;capture=camera" 
    onchange="previewFile(&#39;tempFile&#39;);"/>
    
<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==&#39;video&#39;){
          patn = /\.mp4$|\.MP4$|\.mov$|\.MOV$/;
          inpType = ".MP4,.MOV,.mp4,.mov";
      }
      if(!patn.test(x.value)){   
          if(type==&#39;video&#39;){
              alertMsg("请上传mov、mp4格式的视频");
          }else{
              alertMsg("请上传jpg、png、pdf格式的文件");
          }
      }else{
              initShow();
            $("#uploadForm").ajaxSubmit(options);
      }
       }
     
    var options  = {
        dataType:"json",
        url:&#39;${ctx}/upload/uploadAndSaveFile.html&#39;,    
        type:&#39;post&#39;,    
        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>

まずコードを 1 つずつ貼り付けます。上記のコードは企業ロジックを持っているため、個別の削除や削除も行われていますが、機能の追加、削除、変更、アップロードの全体的な考え方はここに示されています。

個々のツールクラスのメソッドは次のとおりです。

1. 検証判定が空の場合、DateUtils.getCurrentDateTime14()

/**
     * @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", run.getMessage());
        } catch (Exception e) {
            result.put("success", false);
            result.put("message", "上传失败<br/>请重新或扫码上传！");
            // FileUtil.deleteFiles(fileNames);
        }
        try {
            response.setContentType("text/html;charset=gbk");
            JSONObject jsonObj = JSONObject.fromObject(result);
            response.getWriter().print(jsonObj);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
     
    /**
     * @Descript ：保存上传资源
     * @author : Teny_lau
     * @CreatedTime : 2016年11月21日-下午3:28:39
     */
    private void saveUploadFile(HttpServletRequest request) {
        String userId = StringUtils.getNullBlankStr(request.getParameter("userId"));//接收参数
        Map<String, Object> queryMap = new HashMap<String, Object>();
        queryMap.put("","");
        List<XXX> flashList = new ArrayList<XXX>();
        String oldFlashName = "";// 旧文件
        //由于以下逻辑存在项目代码，故以下对象均为举例说明，具体要求视项目自行修改
        Old oldEntity = new Old();
        if (flashList != null && flashList.size() > 0) {
            oldEntity = flashList.get(0);
            //获取已上传的旧文件名，便于在插入新文件时，删除旧文件，避免资源过多占用空间内存
            oldFlashName = oldEntity.getFlashName();
        }
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        CommonsMultipartFile file1 = (CommonsMultipartFile) multipartRequest.getFile("tempFile");// 上传资源参数
        if (file1 != null && !file1.isEmpty()) {
            // 判断上传资源等文件大小 控制在500M以内，自行根据项目要求斟酌
            int maxSize = 500 * 1024 * 1024;
            if (file1.getSize() >= maxSize) {
                throw new RuntimeException("保存失败,文件控制在500M以内");
            }
            String fileName = saveFile(file1, request, oldFlashName);//这里返回的为重命名新文件名称
        }
 
    }
 
    private String saveFile(CommonsMultipartFile file, HttpServletRequest request, String oldFileName) {
        String fileName = file.getOriginalFilename();
        String uploadPath = request.getSession().getServletContext().getRealPath(FILEPATH);
        // 判断是否有上传文件
        File targetFile = null;
        String groupId = StringUtils.getNullBlankStr(request.getParameter("groupId"));//接收参数
        String newTransFileName = DateUtils.getCurrentDateTime14() + groupId + "." + org.apache.commons.lang3.StringUtils.substringAfterLast(fileName, ".");
        String newFilePath = uploadPath + File.separator + newTransFileName;
        try {
            targetFile = new File(new StringBuilder().append(newFilePath).toString());
            // 文件重命名
            file.transferTo(targetFile);
            String oldFilePath = "";
            if (StringUtils.isNotBlank(oldFileName)) {
                oldFilePath = uploadPath + File.separator + oldFileName;
                FileUtil.delSingleFile(oldFilePath);
            }
            // 复制文件到指定盘
            // CopyFileUtil.copyFile(origiNewPath, oldFilePath, true);
             
        } catch (NullPointerException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return newTransFileName;
    }

特定の時間形式は、特定の状況に応じて自分で定義できます。 3. EncoderHandler および FileUtil ツール クラスについては、添付ファイルのソース コードを参照してください。

特記事項:

ここで EncoderHandler について留意する必要がある問題は、このメソッドによって受信されるバイトの長さに上限があることです。つまり、長さを超えた場合は最大 124 文字まで保存できます。 、データ範囲外の例外が報告されます。

/**
     * 功能描述:
     * 判断字符串是否为null或为空字符串，则返回空字符串""
     *
     * @param obj String
     *            待检查的字符串
     * @return String
     *         如果为null或空字符串（包括只含空格的字符串）则返回""，否则返回原字符串去空格
     */
    public static String getNullBlankStr(Object obj) {
 
        if (obj == null) {
            return "";
        } else {
            return obj.toString().trim();
        }
    }

——————————————————————————————

/**
     * 获取当前应用服务器的系统日期时间
     * 
     * @return 日期时间字符串，格式：yyyyMMddHHmmss
     */
    public static String getCurrentDateTime14() {
        DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
        return df.format(new Date(System.currentTimeMillis()));
    }

したがって、コンテンツ文字列を結合するときは、その長さが次を超えてはいけないことに注意してください124 文字のセクションを指定しないと、以下の図に示すようにエラーが報告されます:

さて、上記の内容は、今日説明する QR コードの動的生成とリソースのアップロードに関するすべての知識ポイントです。数回繰り返してください。小さなスキルも習得できると思います。ご質問やご提案がございましたら、お気軽にブログにコメントしてください。

添付のリソースをダウンロードできない場合は、ご自身でリンクに移動してください: down.51cto.com/data/2261528

ご提案やより良いアイデアがある場合は、JAVA 開発プロジェクト ディスカッション グループにご参加ください: 214404624。

賢い頭脳を使って、より新しくてエネルギーに満ちたアイデアを見つけて、技術的な研究と実装可能性について一緒に話し合いましょう。

以上がHTML5を使用してPCのQRコードをスキャンし、WAP側にリソースのアップロードをトリガーする機能を実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。