国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Home WeChat Applet WeChat Development WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

Mar 26, 2017 pm 02:15 PM
WeChat development

Parameters

Description
appId The unique identifier of the official account Apply id
timestamp Generate signed timestamp
nonceStr Generate signed random string
signature signature

The four parameters in the above table are the credentials for initializing the WeChat jsapi call. We have repeatedly explained how to use it in the previous sections, so we will not post how to generate the above four parameters here.

The complete jsp code is as follows: 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>微信jsapi測試-V型知識庫</title>
    <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> 
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  </head>
  <body>
  <center><h3>歡迎來到微信jsapi測試界面-V型知識庫</h3></center>
     <p>基礎(chǔ)接口之判斷當(dāng)前客戶端是否支持指定的js接口</p>   
     <input type="button" value="checkJSAPI" id="checkJsApi"><br>
      <h3 id="menu-image">圖像接口</h3>
      <span class="desc">拍照或從手機(jī)相冊中選圖接口</span><br>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
      <span class="desc">預(yù)覽圖片接口</span><br>
      <button class="btn btn_primary" id="previewImage">previewImage</button><br>
      <span class="desc">上傳圖片接口</span><br>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
      <span class="desc">下載圖片接口</span><br>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button><br>
  顯示圖片<img src="/static/imghw/default1.png"  data-src=""id="  class="lazy" alt=""id="faceImg"data-bd-imgshare-binded="1">
  <br>
  <script type="text/javascript">
  wx.config({  
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。  
    appId: &#39;${appId}&#39;, // 必填，公眾號的唯一標(biāo)識  
    timestamp: &#39;${ timestamp}&#39; , // 必填，生成簽名的時間戳  
    nonceStr: &#39;${ nonceStr}&#39;, // 必填，生成簽名的隨機(jī)串  
    signature: &#39;${ signature}&#39;,// 必填，簽名，見附錄1  
    jsApiList: [&#39;checkJsApi&#39;,
                &#39;chooseImage&#39;,
                &#39;previewImage&#39;,
                 &#39;uploadImage&#39;,
                 &#39;downloadImage&#39;
               ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2  
});  
wx.ready(function(){  
    // 5 圖片接口
  // 5.1 拍照、本地選圖
  var images = {
    localId: [],
    serverId: []
  };
  document.querySelector(&#39;#chooseImage&#39;).onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert(&#39;已選擇 &#39; + res.localIds.length + &#39; 張圖片&#39;);
$("#faceImg").attr("src", res.localIds[0]);//顯示圖片到頁面上
      }
    });
  };
  // 5.2 圖片預(yù)覽
  document.querySelector(&#39;#previewImage&#39;).onclick = function () {
    wx.previewImage({
      current: &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
      urls: [
        &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
        &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
        &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;
      ]
    });
  };
  // 5.3 上傳圖片
  document.querySelector(&#39;#uploadImage&#39;).onclick = function () {
    if (images.localId.length == 0) {
      alert(&#39;請先使用 chooseImage 接口選擇圖片&#39;);
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          //alert(&#39;已上傳：&#39; + i + &#39;/&#39; + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  };
  // 5.4 下載圖片
  document.querySelector(&#39;#downloadImage&#39;).onclick = function () {
    if (images.serverId.length === 0) {
      alert(&#39;請先使用 uploadImage 上傳圖片&#39;);
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert(&#39;已下載：&#39; + i + &#39;/&#39; + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();
  };
});  
 //初始化jsapi接口 狀態(tài)
wx.error(function (res) {
  alert("調(diào)用微信jsapi返回的狀態(tài):"+res.errMsg);
});
 </script>
  </body>
</html>

1, the above code html button code function has been described very clearly , each time a button is clicked, a js function is triggered.

2. Before clicking the upload image button, you must first click the select image button function. After the image is uploaded successfully, the serverid will be returned. So I think this is very silly. I call the WeChat jsapi upload interface. Where do I upload my images? What's up? In fact, we uploaded the pictures to the WeChat server, which are temporary materials. You can log in to the WeChat official management platform to view them. You can also call the WeChat temporary material interface to obtain the pictures.

3. Through the above code, we have uploaded the image to the WeChat server, but the image we uploaded to the WeChat server can only be saved for 3 days, so after uploading, we have to download the image to our local Server, the WeChat download multimedia interface is used here http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID where media_id is our serverId above , so we can download the image locally, the code is as follows

##
package com.test.weixin;
import net.sf.json.JSONObject;
import org.apache.log4j.Level;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.apache.log4j.Priority;
import org.springframework.util.StringUtils;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
/****
 * 
 * @author V型知識庫 www.vxzsk.com
 *
 */
public class DloadImgUtil {
  /**
   * 根據(jù)內(nèi)容類型判斷文件擴(kuò)展名
   *
   * @param contentType 內(nèi)容類型
   * @return
   */
  public static String getFileexpandedName(String contentType) {
    String fileEndWitsh = "";
    if ("image/jpeg".equals(contentType))
      fileEndWitsh = ".jpg";
    else if ("audio/mpeg".equals(contentType))
      fileEndWitsh = ".mp3";
    else if ("audio/amr".equals(contentType))
      fileEndWitsh = ".amr";
    else if ("video/mp4".equals(contentType))
      fileEndWitsh = ".mp4";
    else if ("video/mpeg4".equals(contentType))
      fileEndWitsh = ".mp4";
    return fileEndWitsh;
  }
  /**
   * 獲取媒體文件
   * @param accessToken 接口訪問憑證
   * @param mediaId 媒體文件id
   * @param savePath 文件在本地服務(wù)器上的存儲路徑
   * */
  public static String downloadMedia(String accessToken, String mediaId, String savePath) {
    try {
      accessToken = DloadImgUtil.getAccessToken();
    } catch (IOException e) {
      e.printStackTrace();
    }
    String filePath = null;
    // 拼接請求地址
    String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
    requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("MEDIA_ID", mediaId);
    try {
      URL url = new URL(requestUrl);
      HttpURLConnection conn = (HttpURLConnection) url.openConnection();
      conn.setDoInput(true);
      conn.setRequestMethod("GET");
      if (!savePath.endsWith("/")) {
        savePath += "/";
      }
      // 根據(jù)內(nèi)容類型獲取擴(kuò)展名
      String fileExt = DloadImgUtil .getFileexpandedName(conn.getHeaderField("Content-Type"));
      // 將mediaId作為文件名
      filePath = savePath + mediaId + fileExt;
      BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
      FileOutputStream fos = new FileOutputStream(new File(filePath));
      byte[] buf = new byte[8096];
      int size = 0;
      while ((size = bis.read(buf)) != -1)
        fos.write(buf, 0, size);
      fos.close();
      bis.close();
      conn.disconnect();
      String info = String.format("下載媒體文件成功，filePath=" + filePath);
      System.out.println(info);
    } catch (Exception e) {
      filePath = null;
      String error = String.format("下載媒體文件失?。?s", e);
      System.out.println(error);
    }
    return filePath;
  }
  /***
      * 獲取acess_token 
      * 來源www.vxzsk.com
      * @return
      */
     public static String getAccessToken(){
            String appid="你公眾號基本設(shè)置里的應(yīng)用id";//應(yīng)用ID
            String appSecret="你公眾號基本設(shè)置里的應(yīng)用密鑰";//(應(yīng)用密鑰)
            String url ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";
            String backData=DloadImgUtil.sendGet(url, "utf-8", 10000);
            String accessToken = (String) JSONObject.fromObject(backData).get("access_token");  
            return accessToken;
     }
     /***
         * 模擬get請求
         * @param url
         * @param charset
         * @param timeout
         * @return
         */
         public static String sendGet(String url, String charset, int timeout)
          {
            String result = "";
            try
            {
              URL u = new URL(url);
              try
              {
                URLConnection conn = u.openConnection();
                conn.connect();
                conn.setConnectTimeout(timeout);
                BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));
                String line="";
                while ((line = in.readLine()) != null)
                {
                  result = result + line;
                }
                in.close();
              } catch (IOException e) {
                return result;
              }
            }
            catch (MalformedURLException e)
            {
              return result;
            }
            return result;
          }
}
The rendering is as follows:


WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

Select the picture details that pop up

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

The serverId returned after successful upload

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

The above is the detailed content of WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1502
276
PHP WeChat development: How to implement message encryption and decryption PHP WeChat development: How to implement message encryption and decryption May 13, 2023 am 11:40 AM

PHP is an open source scripting language that is widely used in web development and server-side programming, especially in WeChat development. Today, more and more companies and developers are starting to use PHP for WeChat development because it has become a truly easy-to-learn and easy-to-use development language. In WeChat development, message encryption and decryption are a very important issue because they involve data security. For messages without encryption and decryption methods, hackers can easily obtain the data, posing a threat to users.

PHP WeChat development: How to implement voting function PHP WeChat development: How to implement voting function May 14, 2023 am 11:21 AM

In the development of WeChat public accounts, the voting function is often used. The voting function is a great way for users to quickly participate in interactions, and it is also an important tool for holding events and surveying opinions. This article will introduce you how to use PHP to implement WeChat voting function. Obtain the authorization of the WeChat official account. First, you need to obtain the authorization of the WeChat official account. On the WeChat public platform, you need to configure the API address of the WeChat public account, the official account, and the token corresponding to the public account. In the process of our development using PHP language, we need to use the PH officially provided by WeChat

Using PHP to develop WeChat mass messaging tools Using PHP to develop WeChat mass messaging tools May 13, 2023 pm 05:00 PM

With the popularity of WeChat, more and more companies are beginning to use it as a marketing tool. The WeChat group messaging function is one of the important means for enterprises to conduct WeChat marketing. However, if you only rely on manual sending, it is an extremely time-consuming and laborious task for marketers. Therefore, it is particularly important to develop a WeChat mass messaging tool. This article will introduce how to use PHP to develop WeChat mass messaging tools. 1. Preparation work To develop WeChat mass messaging tools, we need to master the following technical points: Basic knowledge of PHP WeChat public platform development Development tools: Sub

PHP WeChat development: How to implement customer service chat window management PHP WeChat development: How to implement customer service chat window management May 13, 2023 pm 05:51 PM

WeChat is currently one of the social platforms with the largest user base in the world. With the popularity of mobile Internet, more and more companies are beginning to realize the importance of WeChat marketing. When conducting WeChat marketing, customer service is a crucial part. In order to better manage the customer service chat window, we can use PHP language for WeChat development. 1. Introduction to PHP WeChat development PHP is an open source server-side scripting language that is widely used in the field of Web development. Combined with the development interface provided by WeChat public platform, we can use PHP language to conduct WeChat

PHP WeChat development: How to implement user tag management PHP WeChat development: How to implement user tag management May 13, 2023 pm 04:31 PM

In the development of WeChat public accounts, user tag management is a very important function, which allows developers to better understand and manage their users. This article will introduce how to use PHP to implement the WeChat user tag management function. 1. Obtain the openid of the WeChat user. Before using the WeChat user tag management function, we first need to obtain the user's openid. In the development of WeChat public accounts, it is a common practice to obtain openid through user authorization. After the user authorization is completed, we can obtain the user through the following code

PHP WeChat development: How to implement group message sending records PHP WeChat development: How to implement group message sending records May 13, 2023 pm 04:31 PM

As WeChat becomes an increasingly important communication tool in people's lives, its agile messaging function is quickly favored by a large number of enterprises and individuals. For enterprises, developing WeChat into a marketing platform has become a trend, and the importance of WeChat development has gradually become more prominent. Among them, the group sending function is even more widely used. So, as a PHP programmer, how to implement group message sending records? The following will give you a brief introduction. 1. Understand the development knowledge related to WeChat public accounts. Before understanding how to implement group message sending records, I

Steps to implement WeChat public account development using PHP Steps to implement WeChat public account development using PHP Jun 27, 2023 pm 12:26 PM

How to use PHP to develop WeChat public accounts WeChat public accounts have become an important channel for promotion and interaction for many companies, and PHP, as a commonly used Web language, can also be used to develop WeChat public accounts. This article will introduce the specific steps to use PHP to develop WeChat public accounts. Step 1: Obtain the developer account of the WeChat official account. Before starting the development of the WeChat official account, you need to apply for a developer account of the WeChat official account. For the specific registration process, please refer to the official website of WeChat public platform

How to use PHP for WeChat development? How to use PHP for WeChat development? May 21, 2023 am 08:37 AM

With the development of the Internet and mobile smart devices, WeChat has become an indispensable part of the social and marketing fields. In this increasingly digital era, how to use PHP for WeChat development has become the focus of many developers. This article mainly introduces the relevant knowledge points on how to use PHP for WeChat development, as well as some of the tips and precautions. 1. Development environment preparation Before developing WeChat, you first need to prepare the corresponding development environment. Specifically, you need to install the PHP operating environment and the WeChat public platform

See all articles