您的位置:首页 > 移动开发 > 微信开发

微信JSSDK上传图片,代码为上传单张图。

2017-10-14 00:00 232 查看
摘要: 开发手机上传图片代码

HTML端

//这里需要注意的是,千万不要把onclick放到input file上
<div class="load_box">
<img src="ajax返回显示的图片,初始化可以设置个默认的URL"  alt=""  id="img1" class="star" style="height:142px;"  onclick="chooseImage('file1', 'thumb', 'img1')" >
<input type="file"  name="fileToUpload" id="file1"  style="width: 0px; height:0px;">
//隐藏域为了提交表单,post或get获取图片路径
<input type="hidden"  name="thumb"  id="thumb" value=""/>
</div>

<div class="load_box">
<img src="ajax返回显示的图片,初始化可以设置个默认的URL"  id="img2"  style="height:142px;"   onclick="chooseImage('file2', 'thumb1', 'img2')">
<input type="file"  name="fileToUpload" id="file2"  style="width: 0px; height:0px;">
<input type="hidden"  name="thumb1"  id="thumb1" />
</div>

JS代码

//引入JSSDK文件
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>

<script  type="text/javascript" >
//这些配置,PHP生成
wx.config({
debug: false,
appId: '<?php echo $aWechatConfig['appId'] ?>',
timestamp: '<?php echo $aWechatConfig['timestamp'] ?>',
nonceStr: '<?php echo $aWechatConfig['nonceStr'] ?>',
signature: '<?php echo $aWechatConfig['signature'] ?>',
jsApiList: [
'chooseImage',
'uploadImage'
]
});

//上传图片
function chooseImage(obj, fileid, imgid){
//拍照或从手机相册中选图接口
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'],          // 可以指定是原图还是压缩图,默认二者都有['original', 'compressed']
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
//                alert('localIds:' + localIds);

//http://blog.csdn.net/turbocc/article/details/61198447
//在选择图片后,采用setTimeout(function(){wx.uploadImage()},100);可以解决android设备下的问题。
setTimeout(function(){
//上传图片接口
wx.uploadImage({
//这块比较坑, localIds.toString(),必须转字符串,或者 '' + localIds
localId: localIds.toString(),       //需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1,           // 默认为1,显示进度提示
success: function(res) {
var serverId = res.serverId; // 返回图片的服务器端ID, 上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id。
//                            alert('serverId:' + serverId);
//                            调用ajax,走素材解口,保存图片到服务器
var url = '/weixin/mobile/ajax.inc.php?action=getwechatmedia';
var data = {
mediaId: serverId
};
$.post(url, data, function (result) {
if (result.success) {
$('#'+fileid).val('/uploadfile/'+result.msg);
$("#" + imgid).attr("src" , '/uploadfile/'+result.msg);
} else {
show_warn_pop(result.msg);
}
}, 'json');
},
fail: function (res) {
alert('上传失败,请重新上传!');
}
})
},100);
},
fail: function (res) {
alert('上传失败,请重新上传!');
}
});
}

PHP代码

//控制器代码
//引入JSSDK文件,Jssdk.class.php代码见下文。
require_once('./model/Jssdk.class.php');

$oJssdk = new JSSDK(微信APPID,  微信APPSERCERT);
//这里获取jssdk配置
$aWechatConfig = $oJssdk->getSignPackage();

//这里可以引入模板文件

//表单ajax提交验证代码
//引入JSSDK
require_once('./model/Jssdk.class.php');
$oJssdk = new JSSDK(WX_MEMBER_FEE_APPID, WX_MEMBER_FEE_APPSERCERT);
//access_token
$sAccessToken = $oJssdk->getAccessToken();
$sMediaId = filter_submit_string($mediaId);
if ( ! $sMediaId) {
return_error_json('参数错误,请重新选择图片上传!');
}
$sUrl = 'https://api.weixin.qq.com/cgi-bin/media/get?access_token=' . $sAccessToken . '&media_id=' . $sMediaId;

//文件名称
$sImgPath = date('Y',time()).'/'.date('md',time()). '/'.time(). '.jpg';
$sImgName =  PHPCMS_ROOT.'/front/public/uploadfile/' .$sImgPath;

$oFileInfo = $oJssdk->downloadWechatFile($sUrl);
if ($oFileInfo['body']) {
$oJssdk->saveWechatFile($sImgName, $oFileInfo['body']);
return_success_json($sImgPath);
} else {
return_error_json('上传失败,请重新选择!');
}

jssdk.class.php

<?php
class JSSDK
{
private $appId;
private $appSecret;

public function __construct($appId, $appSecret)
{
$this->appId = $appId;
$this->appSecret = $appSecret;
}

public function getSignPackage()
{
$jsapiTicket = $this->getJsApiTicket();

// 注意 URL 一定要动态获取,不能 hardcode.
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

$timestamp = time();
$nonceStr = $this->createNonceStr();

// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";

$signature = sha1($string);

$signPackage = array(
"appId" => $this->appId,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string
);
return $signPackage;
}

private function createNonceStr($length = 16)
{
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}

private function getJsApiTicket()
{
// jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode(file_get_contents("./jsapi_ticket.json"));
if ($data->expire_time < time()) {
$accessToken = $this->getAccessToken();
// 如果是企业号用以下 URL 获取 ticket
// $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
$res = json_decode($this->httpGet($url));
$ticket = $res->ticket;
if ($ticket) {
$data->expire_time = time() + 7000;
$data->jsapi_ticket = $ticket;
$fp = fopen("jsapi_ticket.json", "w");
fwrite($fp, json_encode($data));
fclose($fp);
}
} else {
$ticket = $data->jsapi_ticket;
}

return $ticket;
}

public function getAccessToken()
{
// access_token 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode(file_get_contents("./access_token.json"));
if ($data->expire_time < time()) {
// 如果是企业号用以下URL获取access_token
// $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
$res = json_decode($this->httpGet($url));
$access_token = $res->access_token;
if ($access_token) {
$data->expire_time = time() + 7000;
$data->access_token = $access_token;
$fp = fopen("access_token.json", "w");
fwrite($fp, json_encode($data));
fclose($fp);
}
} else {
$access_token = $data->access_token;
}
return $access_token;
}

//https请求(支持GET和POST)
public function httpGet($url, $data = null)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
if (!empty($data)) {
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($curl);
curl_close($curl);
return $output;
}

//下载文件
public function downloadWechatFile($sUrl)
{
$resourceCh = curl_init($sUrl);
curl_setopt($resourceCh, CURLOPT_HEADER, 0);
curl_setopt($resourceCh, CURLOPT_NOBODY, 0); //只取body头
curl_setopt($resourceCh, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($resourceCh, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($resourceCh, CURLOPT_RETURNTRANSFER, 1);
$package = curl_exec($resourceCh);
$httpinfo = curl_getinfo($resourceCh);
curl_close($resourceCh);
$imageAll = array_merge(array('header' => $httpinfo), array('body' => $package));
return $imageAll;
}

//存储文件
public function saveWechatFile($sFileName, $sFileContent)
{
$oLocalFile = fopen($sFileName, 'w');
if (false !== $oLocalFile) {
if (false !== fwrite($oLocalFile, $sFileContent)) {
fclose($oLocalFile);
}
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: