微信页面上传图片,安卓和ios上传接口的兼容处理
2017-07-10 09:30
495 查看
1.引入微信js,注意是1.2.0版本的,之前用1.1.0 ios一直有问题
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2.微信上传接口调用
<form>
姓名<input type="text" name="uname"><br>
电话<input type="text" name="utel"><br>
<img id="image1" onclick="chooseImage(this)" style="width: 100px;height: 100px;border: 1px solid red;"><input type="hidden" name="img[]">
<img id="image2" onclick="chooseImage(this)" style="width: 100px;height: 100px;border: 1px solid red;"><input type="hidden" name="img[]">
<img id="image3" onclick="chooseImage(this)" style="width: 100px;height: 100px;border: 1px solid red;"><input type="hidden" name="img[]">
<br>
<input type="button" name="" value="提交" id="sub">
</form>
function chooseImage(obj){
// 选择张片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
$(obj).attr('src', localIds);
// 上传照片
wx.uploadImage({
localId: '' + localIds,
isShowProgressTips: 1,
success: function(res) {
serverId = res.serverId;
$(obj).next().val(serverId); // 把上传成功后获取的值附上
}
});
}
});
}
3.上传图片
$("#sub").on("click",function(){
$.ajax({
type:'POST',
url:"file.php",
data:$("form").serialize(),
dataType: 'json',
success : function(data){
alert(data);
}
});
})
4.服务器端接收处理图片
<?php
header("Content-type:text/html;charset=utf-8");
session_start();
error_reporting(0);
require_once 'jssdk.php';
require_once 'DBHelper.class.php';
$AppID='****************';//必须改写*该项目公众账户appid,在公众帐号平台开发者模式中获取
$AppSecret='*************';//必须改写*该项目公众账户appsecret(该值为可变动值,如公众平台重置,则需改写),获取同上
$jssdk = new JSSDK($AppID,$AppSecret);
foreach ($_POST['img'] as $key => $value) {
$file[]=$jssdk->getmedia($value);
}
echo json_encode($file);
?>
// 获取图片地址
function getmedia($media_id){
$access_token=$this->getAccessTokens();
$url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;
if (!file_exists("./Uploads/")) {
mkdir("./Uploads/", 0777, true);
}
$targetName = './Uploads/'.date('YmdHis').rand(1000,9999).'.jpg';
$ch = curl_init($url); // 初始化
$fp = fopen($targetName, 'wb'); // 打开写入
curl_setopt($ch, CURLOPT_FILE, $fp); // 设置输出文件的位置,值是一个资源类型
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
return $targetName;
}
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2.微信上传接口调用
<form>
姓名<input type="text" name="uname"><br>
电话<input type="text" name="utel"><br>
<img id="image1" onclick="chooseImage(this)" style="width: 100px;height: 100px;border: 1px solid red;"><input type="hidden" name="img[]">
<img id="image2" onclick="chooseImage(this)" style="width: 100px;height: 100px;border: 1px solid red;"><input type="hidden" name="img[]">
<img id="image3" onclick="chooseImage(this)" style="width: 100px;height: 100px;border: 1px solid red;"><input type="hidden" name="img[]">
<br>
<input type="button" name="" value="提交" id="sub">
</form>
function chooseImage(obj){
// 选择张片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
$(obj).attr('src', localIds);
// 上传照片
wx.uploadImage({
localId: '' + localIds,
isShowProgressTips: 1,
success: function(res) {
serverId = res.serverId;
$(obj).next().val(serverId); // 把上传成功后获取的值附上
}
});
}
});
}
3.上传图片
$("#sub").on("click",function(){
$.ajax({
type:'POST',
url:"file.php",
data:$("form").serialize(),
dataType: 'json',
success : function(data){
alert(data);
}
});
})
4.服务器端接收处理图片
<?php
header("Content-type:text/html;charset=utf-8");
session_start();
error_reporting(0);
require_once 'jssdk.php';
require_once 'DBHelper.class.php';
$AppID='****************';//必须改写*该项目公众账户appid,在公众帐号平台开发者模式中获取
$AppSecret='*************';//必须改写*该项目公众账户appsecret(该值为可变动值,如公众平台重置,则需改写),获取同上
$jssdk = new JSSDK($AppID,$AppSecret);
foreach ($_POST['img'] as $key => $value) {
$file[]=$jssdk->getmedia($value);
}
echo json_encode($file);
?>
// 获取图片地址
function getmedia($media_id){
$access_token=$this->getAccessTokens();
$url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;
if (!file_exists("./Uploads/")) {
mkdir("./Uploads/", 0777, true);
}
$targetName = './Uploads/'.date('YmdHis').rand(1000,9999).'.jpg';
$ch = curl_init($url); // 初始化
$fp = fopen($targetName, 'wb'); // 打开写入
curl_setopt($ch, CURLOPT_FILE, $fp); // 设置输出文件的位置,值是一个资源类型
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
return $targetName;
}
相关文章推荐
- 移动端html5图片上传方法【更好的兼容安卓IOS和微信】
- 移动端html5图片上传方法【更好的兼容安卓IOS和微信】
- 移动端html5图片上传方法【更好的兼容安卓IOS和微信】
- 微信开发上传图片ios与安卓兼容问题
- 移动端图片上传方法【更好的兼容安卓IOS和微信】 推荐
- 微信上传多张图片问题(兼容ios,安卓)
- 上传图片兼容ios和安卓
- 利用微信js-sdk上传图片,在安卓下无反应,在ios下报miss miss argument的错
- PHP 使用 微信JSSDK 拍照选择图片接口 利用localid预览时 安卓手机正常显示 iOS手机不显示
- 移动端web无刷新上传图片【兼容安卓IOS】 推荐
- h5上传图片完美兼容安卓ios
- 手机网页版JS压缩上传图片--base64位 兼容IOS和安卓
- PHP post 接口上传图片 [接收ios ||androip 两种接收图片数据流保存图片方式]
- IOS 图片上传处理 图片压缩 图片处理
- IOS应用开发-图片处理(拉伸图片 创建缩略图 解决图片旋转的问题 图片编码及上传 将图片写入磁盘)
- IOS 关于图片上传(客户端——接口——服务器)
- IOS 图片上传处理 图片压缩 图片处理
- iOS基础8:自定义MyData/自定义SQLite用于网络判断,版本判断,图片缓存处理,下载或者上传的GET或POST请求,加密手段,.数据解析
- 微信公共服务平台开发(.Net 的实现)8-------处理图片(上传下载发送)
- iOS 之图片上传处理