Beispielcode mit HTML5 zur Implementierung der Funktion zum Scannen von PC-QR-Codes und zum Auslösen des Hochladens von Ressourcen durch die WAP-Seite

Erklären Sie einen Java-Code, der dynamisch einen PC-QR-Codeeffekt basierend auf Parametern generiert und ihn erfolgreich scannt. Die Funktion zum Hochladen von Grafiken oder VideoRessourcen

Der Schlüssel liegt in der Integration eines vollständigen logischen Satzes Wenn aufgerufen, welche Technologien abgedeckt werden sollen und welche Interaktionsbeziehungen im Detail vorliegen, ist dies eine grobe Einführung in die technischen Probleme angewendet, und die Front-End-Methode ist einfach zu verwenden

HTML-Element

-Layout, generieren Sie einfach QR-Code, das Back-End--Framework ist Spring MVC , die Struktur ist einfach, die Referenz ist klar und die angewendeten 2 Das QR-Code-Jar-Paket ist: 1. Beginnen Sie mit dem Frontend und erstellen Sie das

Seitenlayout

, um sicherzustellen dass der QR-Code-Effekt erzeugt werden kann:

Der erzielte Formungseffekt ist wie im Bild oben dargestellt. Beim Hinein- und Herausbewegen der Maus entsteht der verborgene QR-Code-Effekt Es wird langsam angezeigt, wie man es mit CSS umsetzt. Hier muss erklärt werden, dass der QR-Code nur einen Satz benötigt. Tag, um das zurückgegebene QR-Code-Bild dynamisch zu generieren, und dann kann das Mobiltelefon mit einem Piepton darauf zugreifen. Stellen Sie natürlich sicher, dass sich die IPs während des Vorgangs im selben LAN befinden Test.

Die gescannten Seiten sind auch die gleichen, wie Sie sie gestalten möchten, solange die Upload-Funktion implementiert werden kann.

<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<img  src="${ctx}/upload/codeImg.html?userId=${loginUserId}" / alt="Beispielcode mit HTML5 zur Implementierung der Funktion zum Scannen von PC-QR-Codes und zum Auslösen des Hochladens von Ressourcen durch die WAP-Seite" >

Das Frontend Das Upload-Plugin ist jquery.form.js, und die wichtigsten JS-Methoden lauten wie folgt:

Da der obige Code die interne Logik des Unternehmens betrifft, gibt es an einigen Stellen einige Löschungen, aber insgesamt Die Idee wurde klar aufgelistet.

Wir müssen über ein angewendetes UI-Plug-in sprechen, das heißt über den Hinweis-Popup-Box-Effekt, der von AlertMsg verwendet wird einheitlich und der adaptive Plug-in-Effekt ist kompatibel mit den integrierten Stilen und Funktionen gängiger Browser wie IE, Google, 360 und Firefox. Sie können das Plugin auch selbst verwenden Suche

, deshalb werde ich es hier nicht einzeln erklären

<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>

2. Behandeln Sie die QR-Code-Generierungstechnologie und ressourcenschonende Aktionen vom Backend aus:

Die Die oben genannten Codes wurden aufgrund von Unternehmenslogiken auch einzeln eingefügt, die Gesamtidee des Hinzufügens, Löschens, Änderns und Hochladens wird hier jedoch einzeln angezeigt Die einzelnen Methoden der Tool-Klasse lauten wie folgt:

1. StringUtils.getNullBlankStr

Die Aktion, bei der eine leere Zeichenfolge zurückgegeben wird, wenn die Überprüfungsbeurteilung leer ist.

2. 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;
    }

Das spezifische Zeitformat kann je nach Situation selbst definiert werden.

3. Die Toolklassen EncoderHandler und FileUtil finden Sie im beigefügten Dateiquellcode.

Besonderer Hinweis:

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

Ein Problem, an das hier beim EncoderHandler erinnert werden muss, besteht darin, dass die Länge der von dieser Methode empfangenen Bytes maximal begrenzt ist, d. h. es können maximal gespeichert werden 124 Zeichen, was die Länge überschreitet. Eine Datenüberschreitungsausnahme wird gemeldet.

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

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

So zufrieden Achten Sie beim Spleißen von Zeichenfolgen darauf, dass die Länge 124 Bytes nicht überschreiten darf, da sonst ein Fehler gemeldet wird, wie in der folgenden Abbildung dargestellt:

Nun, der obige Inhalt ist Ich habe heute das gesamte Wissen über QR-Code und die hochgeladenen Ressourcen erlernt. Wenn Sie Fragen oder Anregungen haben, können Sie es ein paar Mal ausprobieren , können Sie gerne im Blog kommentieren.

public void encoderQRCoder(String content, HttpServletResponse response) {
        try {
            Qrcode handler = new Qrcode();
            handler.setQrcodeErrorCorrect('M');
            handler.setQrcodeEncodeMode('B');
            handler.setQrcodeVersion(7);
             
            // System.out.println(content);
            byte[] contentBytes = content.getBytes("UTF-8");
             
            BufferedImage bufImg = new BufferedImage(140, 140, BufferedImage.TYPE_INT_RGB);
             
            Graphics2D gs = bufImg.createGraphics();
             
            gs.setBackground(Color.WHITE);
            gs.clearRect(0, 0, 140, 140);
             
            // 设定图像颜色：BLACK
            gs.setColor(Color.BLACK);
             
            // 设置偏移量 不设置肯能导致解析出错
            int pixoff = 2;
            // 输出内容：二维码
            if (contentBytes.length > 0 && contentBytes.length < 124) {
                boolean[][] codeOut = handler.calQrcode(contentBytes);
                for (int i = 0; i < codeOut.length; i++) {
                    for (int j = 0; j < codeOut.length; j++) {
                        if (codeOut[j][i]) {
                            gs.fillRect(j * 3 + pixoff, i * 3 + pixoff, 3, 3);
                        }
                    }
                }
            } else {
                System.err.println("QRCode content bytes length = " + contentBytes.length + " not in [ 0,120 ]. ");
            }
             
            gs.dispose();
            bufImg.flush();
             
            // 生成二维码QRCode图片
            ImageIO.write(bufImg, "jpg", response.getOutputStream());
             
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

Wenn die angehängte Ressource nicht heruntergeladen werden kann, wechseln Sie bitte selbst zu dem Link: down.51cto.com/data/2261528

Wenn Sie Vorschläge oder bessere Ideen haben, sind Sie herzlich willkommen, sich JAVA Development anzuschließen Projektdiskussionsgruppe: 214404624.

// 字节长度须控制在124个长度以内，否则报异常数组索引值溢出
        String content = localIp + ":" + port + path + "/upload/toUploadMain.html?" + params;
        EncoderHandler encoder = new EncoderHandler();
        encoder.encoderQRCoder(content, response);

Nutzen Sie Ihr intelligentes Gehirn, um neuere und energischere Ideen zu entdecken. Lassen Sie uns gemeinsam über technische Forschung und Umsetzbarkeit sprechen.

Das obige ist der detaillierte Inhalt vonBeispielcode mit HTML5 zur Implementierung der Funktion zum Scannen von PC-QR-Codes und zum Auslösen des Hochladens von Ressourcen durch die WAP-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!