If you want to use h5 to achieve image upload & preview effect on the mobile terminal, you must first understand the relevant knowledge of html5 file api (all apis are only required for this function):
You can also refer to this for demonstration effect: WeChat H5 mobile website payment source code example
1. The CURL object server must be enabled, otherwise the openid
Blob cannot be obtained to represent the original binary data, and the Html5 file object is inherited from it. It provides the following attributes:
type: mime type, if it is an unknown type, it returns an empty string
size: The byte length of the Blob object 2. The
input (type="file") control and the file&FileList object
effect picture is as follows:
The complete code is as follows:
The latest practical WeChat H5 mobile website payment source code example
Recently, when browsing html5 webpages with the browser on the mobile phone (not the WeChat browser), when I see some websites click on "WeChat Payment", they directly open WeChat for payment (that is, directly call WeChat in the browser), what is this? did it? For example, there is a text link on the page: WeChat payment, after clicking it, the WeChat APP is automatically called, and I am not using the WeChat browser to open the webpage.
However, the second master did it! ! !
Even in Safari, you can click a link to reach the WeChat payment interface, but after the user has paid, there is currently no way to return to Safari. If it is an app developed by yourself, of course, there is no problem, and the same effect as the native app can be achieved.
The source code is as follows:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8"/>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;" />
<title>[The WeChat H5 payment of the second master] MWEB payment example</title>
<!--
/****************************************
This document is an example of [WeChat Payment V2.0] JSAPI payment
You need to use the authorization interface to enter the page
****************************************/
-->
<style type="text/css">
/* reset [[*/
body,p,ul,li,h1,h2,form,input{margin:0;padding:0;}
h1,h2{font-size:100%;}
ul{list-style:none;}
body{-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:Helvetica;background:#ECECEC;}
html,body{height:100%;}
a,button,input,img{-webkit-touch-callout:none;outline:none;}
a{text-decoration:none;}
/* reset]]*/
/* Function[[*/
.hide{display:none!important;}
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* Function]]*/
/* button [[*/
a[class*="btn"]{display:block;height:42px;line-height:42px;color:#FFFFFF;text-align:center;border-radius:5px;}
.btn-blue{background:#3D87C3;border:1px solid #1C5E93;}
.btn-green{background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #43C750), color-stop(1, #31AB40));border:1px solid #2E993C;box-shadow:0 1px 0 0 #69D273 inset;}
/* button [[*/
/* Recharge page [[*/
.charge{font-family:Helvetica;padding-bottom:10px;-webkit-user-select:none;}
.charge h1{height:44px;line-height:44px;color:#FFFFFF;background:#3D87C3;text-align:center;font-size:20px;-webkit-box-sizing:border-box;box-sizing:border-box;}
.charge h2{font-size:14px;color:#777777;margin:5px 0;text-align:center;}
.charge .content{padding:10px 12px;}
.charge .select li{position:relative;display:block;float:left;width:100%;margin-right:2%;height:150px;line-height:150px;text-align:center;border:1px solid #BBBBBB;color:#666666;font-size:16px;margin-bottom:5px;border-radius:3px;background-color:#FFFFFF;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}
.charge .price{border-bottom:1px dashed #C9C9C9;padding:10px 10px 15px;margin-bottom:20px;color:#666666;font-size:12px;}
.charge .price strong{font-weight:normal;color:#EE6209;font-size:26px;font-family:Helvetica;}
.charge .showaddr{border:1px dashed #C9C9C9;padding:10px 10px 15px;margin-bottom:20px;color:#666666;font-size:12px;text-align:center;}
.charge .showaddr strong{font-weight:normal;color:#9900FF;font-size:26px;font-family:Helvetica;}
.charge .copy-right{margin:5px 0; font-size:12px;color:#848484;text-align:center;}
/* Recharge page]]*/
</style>
</head>
<body>
<article class="charge">
<h1>Second Master WeChat Pay-H5-demo</h1>
<section class="content">
<h2>Item: Test item. </h2>
<ul class="select cf">
<li><img src="weixin.jpg" style="width:150px;height:150px"></li>
</ul>
<p class="copy-right">Pro, this product does not provide refund and shipping services</p>
<div class="price">微信价：<strong>￥0.01元</strong></div>
<div class="operation"><a class="btn-green" id="getBrandWCPayRequests" href="<?php echo $objectxml['mweb_url'];?>">立即购买</a></div>
<p class="copy-right">WeChat H5 payment demo is provided by Wechat, the material network of Erdangjia</p>
</section>
</article>
</body>
<script src="//wx.gtimg.com/wxpay_h5/fingerprint2.min.1.4.1.js"></script>
<script type="text/javascript" src="../../css/zepto.min.js"></script>
<script type="text/javascript">
var fp=new Fingerprint2();
fp.get(function(result)
{
$.getJSON("h5.json.php?code="+result, function(d){
if(d.errmsg == ''){
$('#getBrandWCPayRequest').attr("href",d.url);//+'&redirect_url=http%3a%2f%2fwxpay. wxutil.com%2fmch%2fpay%2fh5jumppage.php
}else{
alert(d.errmsg);
}
});
}
);
</script>
</html>
The server is as follows:
/**
* Created by Erdangjia's.
* User: [email protected]
* Date: 17-10-18
* Time: 10:35 am
*/
$money= 1;//Recharge amount
$userip = $_SERVER["REMOTE_ADDR"]; //Get user device IP
$appid = "123";//WeChat
$mch_id = "123";//WeChat official x
$key = "123";//Wechat merchant key set by yourself
$rand = rand(00000.99999);
$out_trade_no = '20170804'.$rand;//Platform internal order number
$nonce_str=MD5($out_trade_no);//Random string
$body = "WeChat H5 Payment";//Content
$total_fee = $money; //amount
$spbill_create_ip = $userip; //IP
$notify_url = "http://www.erdangjiade.com/"; //Callback address
$trade_type = 'MWEB';//The transaction type is detailed in the API
$scene_info ='{"h5_info":{"type":"Wap","wap_url":"http://www.erdangjiade.com","wap_name":"WeChat H5 Payment"}}';//Scenario Information Required Parameters
$signA ="appid=$appid&body=$body&mch_id=$mch_id&nonce_str=$nonce_str¬ify_url=$notify_url&out_trade_no=$out_trade_no&scene_info=$scene_info&spbill_creae_ip=$spbill_create_ip&total_fee=$total_fe&trade_type=$trade_type";
$strSignTmp = $signA."&key=$key"; //Note the order of splicing strings
$sign = strtoupper(MD5($strSignTmp)); // Convert to uppercase after MD5
$post_data = "<xml>
<appid>$appid</appid>
<body>$body</body>
<mch_id>$mch_id</mch_id>
<nonce_str>$nonce_str</nonce_str>
<notify_url>$notify_url</notify_url>
<out_trade_no>$out_trade_no</out_trade_no>
<scene_info>$scene_info</scene_info>
<spbill_create_ip>$spbill_create_ip</spbill_create_ip>
<total_fee>$total_fee</total_fee>
<trade_type>$trade_type</trade_type>
<sign>$sign</sign>
</xml>";//Splicing into XML format
$url = "https://api.mch.weixin.qq.com/pay/unifiedorder";//WeChat parameter transfer address
It took a week to get it done, and the test was successful. I hope it can help some beginners. Don't spray it, I'm just learning to play.