//前端js代码
<script> //客户端6.0.2
wx.config({
//debug:true,
appId: "{pigcms:$signPackage.appId}",
timestamp: {pigcms:$signPackage.timestamp},
nonceStr: '{pigcms:$signPackage.nonceStr}',
signature: '{pigcms:$signPackage.signature}',
url : '{pigcms:$signPackage.url}',
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
]
});
wx.ready(function() {
// 1 判断当前版本是否支持指定 JS 接口,支持批量判断
wx.checkJsApi({
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'downloadVoice'
],
success: function(res) {
//alert(JSON.stringify(res));
}
});
var images = {
localId: [],
serverId: [],
downloadId: []//可以无视
};
var xmlHttpRequest;
var accessToken=getCookie("accessToken");
//选择图片
document.getElementById("selpic").onclick = function() {
$("#errormsg").append("开始选择图片<br />");
wx.chooseImage({
count: 9, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有'original',
success: function(res) {
images.localId = res.localIds;// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
jQuery(function(){
var imglist="";
$.each( res.localIds, function(i, n){//这里是显示已选择的图片
imglist+='<li ><img src="'+n+'" style="width:95%;height:150px;" /></li>';
//$("#errormsg").append("res.localIds:"+n+"<br />");
});
$("#imageContainer > ul").html(imglist);
});
}
});
} document.querySelector("#uploadImage").onclick = function () {//绑定onclick事件,如果没有这个按钮,要注释掉代码,不然点击无效
$("#errormsg").show();
$("#errormsg").append("<br />开始上传图片");//下文对此div赋值,只为了直观的看到动态效果
if (images.localId.length == 0) {
alert('请先选择图片');
return;
}
images.serverId = [];
var localIds = images.localId;
uploadimg(localIds);
}
var currentproindex=0;
function getimgtoserver(serverIds){
//$("#errormsg").append("<br />serverIds length:"+serverIds.length+",");
var classid=$("#seltype").val();
var classname=encodeURI($("#seltype option:selected").text());//传汉字需要转一下,php那边再翻转一下就好了
var serverId=serverIds.pop();//很微妙的方法,每次从数组取一个
var proname=encodeURI($("#txtname").val());
var newurl="http://ab.com/i_product.php?action=getwximg&proname="+proname+"&classid="+classid+"&classname="+classname+"&proindex="+currentproindex+"&uname={pigcms:$_SESSION['uname']}&uid={pigcms:$_SESSION['uid']}&token={pigcms:$_SESSION['token']}&wxurl=http://file.api.weixin.qq.com/cgi-bin/media/get&random="+Math.random()+"&accesstoken="+accessToken+"&mediaid="+serverId;//这里拼接地址,给服务器传参,下载图片需要在服务端处理,js请求存在跨域问题,并且,微信里,jq的初始xmlHttpRequest不能用,只能手写了,难道是我不会用jq?
//$("#errormsg").append("<br />"+newurl);
//$("#errormsg").append("<br />serverId:"+serverId)
xmlHttpRequest.open("POST",newurl,true);//防止参数过长,还是用post方法吧
xmlHttpRequest.onreadystatechange=function(){
if (xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
if(serverIds.length>0){
currentproindex+=1;
getimgtoserver(serverIds);//递归调用,等本次成功,再开始第二个图片的上传操作
}
else{
$("#errormsg").append("<br />上传成功");
}
//$("#errormsg").append("<br />"+xmlHttpRequest.responseText);
}
else{
$("#errormsg").append(xmlHttpRequest.status);
}
}
else if(xmlHttpRequest.readyState==1){
//$("#errormsg").append("<br />初始化成功");
}
else if(xmlHttpRequest.readyState==2){
$("#errormsg").append("<br />正在发送数据");
}
else if(xmlHttpRequest.readyState==3){
$("#errormsg").append("<br />正在等待服务器反馈");
}
else{
$("#errormsg").append("发生错误了。");//+xmlHttpRequest.responseText);
}
}
xmlHttpRequest.send();
}
function uploadimg(localIds){
//$("#errormsg").append("<br />localIds length:"+localIds.length);
var localId = localIds.pop();
wx.uploadImage({
localId: localId,
// isShowProgressTips: 1,
success: function (res) {
images.serverId.push(res.serverId);
//$("#errormsg").append("<br />"+res.serverId+",");
if(localIds.length > 0){
uploadimg(localIds);
}
else{
if(window.XMLHttpRequest){
xmlHttpRequest=new XMLHttpRequest();
}else{
xmlHttpRequest=new ActiveXObject("MSXML2.XMLHTTP.3.0");//("Microsoft.XMLHTTP");
}
$("#errormsg").append("<br />准备处理,请等待...");
var serverIds=images.serverId;
getimgtoserver(serverIds);
}
},
fail: function (res) {
alert("上传失败,请稍候重试");
}
});
} });
wx.error(function(res) {
alert(res.errMsg);
}); //读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return (arr[2]);
else
return null;
}
function initsel(){
var url="http://abc.com/chat/i_product.php?action=getclothestype&token={pigcms:$_SESSION['token']}";
//alert(url);
$.getJSON(url,function(data){
var str="<option value=''>-请选择-</option>";
if(data.length>0){
for(i=0;i<data.length;i++){
str+="<option value='"+data[i].id+"'>"+data[i].name+"</option>"
}
}
$("#seltype").html(str);
});
}
$(function(){
initsel();//初始化下拉菜单
});
</script>
//php服务端代码
$act = $_GET['action'];
if ($act == 'getwximg') {
$wxurl=$_GET['wxurl'];
$access_token=$_GET['accesstoken'];
$media_id=$_GET['mediaid'];
$newurl=$wxurl."?access_token=".$access_token."&media_id=".$media_id;//用php去请求获取图片的接口,js直接调用存在跨域问题
$token=$_GET['token'];
$uid=$_GET['uid'];
$uname=$_GET['uname'];
$proindex=$_GET['proindex'];
$classid=$_GET['classid'];
$classname=urldecode($_GET['classname']);//取到的汉字,翻转一下
$proname=urldecode($_GET['proname']); $fileInfo = downloadWeixinFile($newurl);//通过接口,取结果
$filename = date("ymdhis",time()).".jpg";//图片名称
$time = time();
$newfolder="uploads/".date("y-m-d",$time)."/";//文件夹名称
saveWeixinFile($newfolder,$filename, $fileInfo["body"]);//把取到的base64代码,保存成图片
//echo $newurl;
if($proindex==0){//因为图片是一次性上传的,这里判断一下,第一张作为产品的封面,剩下的作为产品的描述
$query = "INSERT INTO tp_img(uid,uname,token,createtime,uptatetime,classid,classname,title,pic) VALUE('".$uid."','".$uname."','".$token."','".$time."','".$time."',".$classid.",'".$classname."','".$proname."','http://abc.com/chat/".$newfolder.$filename."')";
//$query = "INSERT INTO t_ChatMessage(UserCode,Contents,ToUser,IsRead) VALUE('$sendid', '$msg','$toid','0')";
$result = mysql_query($query) or die("{\"error\":true,\"errorMsg\":\"Error in query: $query. " . mysql_error()."\"}");
}
else{
$query ="select * from tp_img where token='".$token."' order by uptatetime desc limit 1";
$result = mysql_query($query) or die("{\"error\":true,\"errorMsg\":\"Error in query: $query. " . mysql_error()."\"}");
$items = array();
while($row = mysql_fetch_array($result)){
array_push($items, ($row));
$query_update="update tp_img set info=CONCAT(info,'','<div style=\"margin-top:3px;\"><img src=\"http://abc.com/chat/".$newfolder.$filename."\" /></div>') where id=$row[id]";//在产品描述的字段上追加内容
mysql_query($query_update);
}
}
//echo "{\"error\":\""+$rtmsg+"\"}"; }
function downloadWeixinFile($url)
{
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_NOBODY, 0); //只取body头
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$package = curl_exec($ch);
$httpinfo = curl_getinfo($ch);
curl_close($ch);
$imageAll = array_merge(array('header' => $httpinfo), array('body' => $package));
return $imageAll;
} function saveWeixinFile($newfolder,$filename, $filecontent)
{
createFolder($newfolder);
$local_file = fopen($newfolder."/".$filename, 'w');
if (false !== $local_file){ if (false !== fwrite($local_file, $filecontent)) { fclose($local_file); }
}
}
function createFolder($path)
{
if (!file_exists($path))
{
createFolder(dirname($path));
mkdir($path, 0777);
}
}
//第二种方法

$accessToken = '公众号 AccessToken';
$media_id = 'wx.uploadImage 返回的 serverId'; // 要存在你服务器哪个位置?
$targetName = './tmp/'.date('YmdHis).'.jpg'; $ch = curl_init("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$serverId}");
$fp = fopen(FCPATH.$targetName, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
//第三种方法
public function doMobileUpload(){
global $_W,$_GPC;
load()->classs('weixin.account');
$accObj= new WeixinAccount();
$access_token = $accObj->fetch_available_token(); $media_id = $_GET['media_id']; $url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id; $newfolder= ATTACHMENT_ROOT . 'images' . '/hao_time_photos'."/";//文件夹名称
if (!is_dir($newfolder)) {
mkdir($newfolder, 0777);
}
$picurl = 'images'.'/hao_time_photos'."/".date('YmdHis').rand(1000,9999).'.jpg';
$targetName = ATTACHMENT_ROOT.$picurl;
$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);
echo $picurl;
}

微信js-sdk,选择图片,上传,下载到本地,php服务端的更多相关文章

  1. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  2. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  3. thinkphp微信开发之jssdk图片上传并下载到本地服务器

    public function test2(){ $Weixin = new \Weixin\Controller\BaseController(); $this->assign('signPa ...

  4. 阿里云使用js 实现OSS图片上传、获取OSS图片列表、获取图片外网访问地址(读写权限私有、读写权限公共);

    详情请参考:https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59a 或者https://h ...

  5. nodeJs实现微信小程序的图片上传

    今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...

  6. JSP+Servlet中使用jspsmartupload.jar进行图片上传下载

    JSP+Servlet中使用cos.jar进行图片上传 upload.jsp <form action="FileServlet" method="post&quo ...

  7. android拍照选择图片上传服务器自定义控件

    做android项目的时候总免不了遇到图片上传功能,虽然就是调用android系统的拍照和相册选择功能,但是总面部了把一大推代码写在activity里,看上去一大推代码头都昏了.不如把这些功能都集成一 ...

  8. WebApi2 文件图片上传下载

    Asp.Net Framework webapi2 文件上传与下载 前端界面采用Ajax的方式执行 一.项目结构 1.App_Start配置了跨域访问,以免请求时候因跨域问题不能提交.具体的跨域配置方 ...

  9. Android开发中使用七牛云存储进行图片上传下载

    Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...

  10. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

随机推荐

  1. gem安装报错解决方法

    gem install  rdiscount -- --use-system-libraries

  2. 如何用vs2010打开vs2013的项目?

    众所周知,用vs2013打开vs2010十分简单,无须做什么. 从VS2010开始,不再制作专有的文件格式,这只是一个xml格式的文本文件,其中决定了解决方案的平台工具集和VS版本. 既然.sln只是 ...

  3. c#获取ip的方法cdn加速获取真实ip方法

    服务端://方法一HttpContext.Current.Request.UserHostAddress; //方法二HttpContext.Current.Request.ServerVariabl ...

  4. c语言求平面上2个坐标点的直线距离、求俩坐标直线距离作为半径的圆的面积、递归、菲波那次数列、explode

    #include <stdio.h> #include <math.h> #include <string.h> char explode( char * str ...

  5. 关于android的屏幕保持常亮

    实现这一功能的方法有两种,一种是在Manifest.xml文件里面声明,一种是在代码里面修改LayoutParams的标志位.具体如下: 1.在Manifest.xml文件里面用user-permis ...

  6. Asp.net MVC 4 Attributes特性

    Attributes特性 ActionFilterAttribute Represents the base class for filter attributes. 代表筛选器属性的基类. Acti ...

  7. UITableViewStyleGrouped顶部留白问题

    我这样创建, ? 1 2 self.tableView = [[UITableView alloc] initWithFrame:                       CGRectMake(0 ...

  8. java之装饰器模式

    Decorator Pattern(装饰器模式),定义:Attach additional responsibilities to an object dynamically. Decorators  ...

  9. nginx利用反向代理调试后台接口

    1.location 支持配置项目的绝对路径 2.假设我们的后台API地址是以API开头,location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样 ...

  10. [Java]数组排序-选择排序 冒泡排序 插入排序

    1 选择排序  原理:a 将数组中的每个元素,与第一个元素比较          如果这个元素小于第一个元素, 就将这个         两个元素交换.       b 每轮使用a的规则, 可以选择出 ...