微信js-sdk,选择图片,上传,下载到本地,php服务端

//前端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);
时间: 2024-10-20 17:22:57

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

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧!

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了多图上传,所以今天我们来一起撸一下,怎么去思考这个实现逻辑! 这里我想到的思路是比较简单的,首先,我们有一个按钮,按钮是上传图片,点击之后弹出某个界面进行图片的选择,一般是九张图片或者十二张,选完之后就直接上传了,大致的流程应该是这个样子,那我们首先来写个按钮 activity_main.xml <?

转:微信公众平台开发(80) 上传下载多媒体文件

微信公众平台开发(80) 上传下载多媒体文件 微信公众账号在回复图片.语音.视频的时候,将使用media_id来调用相关文件,很多朋友咨询这个如何开发实现.本文将介绍在微信公众平台开发过程中,如何上传下载多媒体文件. 一.上传多媒体文件 公众号可调用本接口来上传图片.语音.视频等文件到微信服务器,上传后服务器会返回对应的media_id,公众号此后可根据该media_id来获取多媒体.请注意,media_id是可复用的,调用该接口需http协议. 通常,文件上传是通过html表单进行的,但通过C

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

利用HTML Plus的Camera.GalleryIO.Storage和Uploader来实现手机APP拍照或者从相册选择图片上传.Camera模块管理设备的摄像头,可用于拍照.摄像操作,通过plus.camera获取摄像头管理对象.Gallery模块管理系统相册,支持从相册中选择图片或视频文件.保存图片或视频文件到相册等功能.通过plus.gallery获取相册管理对象.IO模块管理本地文件系统,用于对文件系统的目录浏览.文件的读取.文件的写入等操作.通过plus.io可获取文件系统管理对象

monotouch拍照、选择图片上传实现

不多说,上码: 选择图片上传========> using System; using System.Drawing; using MonoTouch.AssetsLibrary; using MonoTouch.UIKit; using MonoTouch.Foundation; namespace world { public class ImageViewController : UIViewController { UIImagePickerController imagePicker;

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

随便写个方法 public function test2(){ $Weixin = new \Weixin\Controller\BaseController(); $this->assign('signPackage', $Weixin->jssdk->GetSignPackage()); $this->display(); } test2.html核心代码 <script type="text/javascript" src="__STATI

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

JSP+Servlet中使用cos.jar进行图片上传 upload.jsp <form action="FileServlet" method="post" enctype="multipart/form-data"> <input type="file" name="myfile"> <input type="text" name="cmt&q

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

Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储原理,上面这幅图片是官方给出的原理图,表述当然比较清晰了.可以看出,要进行图片上传的话可以分为五大步: 1. 客户端用户登录到APP的账号系统里面: 2. 客户端上传文件之前,需要向业务服务器申请七牛的上传凭证,这个凭证由业务服务器使用七牛提供的服务端SDK生成: 3. 客户端使用七牛提供的客户端S

微信公众平台开发(80) 上传下载多媒体文件

http://www.cnblogs.com/txw1958/p/weixin80-upload-download-media-file.html 微信公众账号在回复图片.语音.视频的时候,将使用media_id来调用相关文件,很多朋友咨询这个如何开发实现.本文将介绍在微信公众平台开发过程中,如何上传下载多媒体文件. 一.上传多媒体文件 公众号可调用本接口来上传图片.语音.视频等文件到微信服务器,上传后服务器会返回对应的media_id,公众号此后可根据该media_id来获取多媒体.请注意,m

WebApi2 文件图片上传下载

Asp.Net Framework webapi2 文件上传与下载 前端界面采用Ajax的方式执行 一.项目结构 1.App_Start配置了跨域访问,以免请求时候因跨域问题不能提交.具体的跨域配置方式如下,了解的朋友请自行略过. 跨域配置:NewGet安装dll Microsofg.AspNet.Cors 然后在App_Start 文件夹下的WebApiConfig.cs中写入跨域配置代码. 1 public static class WebApiConfig 2 { 3 public sta

调用相机,选择图片上传,带预览功能、图片压缩、相机文字设置、

摘要 iOS调用相机,iOS调用相册,保存至应用程序沙盒,高保真压缩图片,并有点击放大预览,再次点击缩回至原大小,带动画效果,附源码下载地址. Xcode版本4.5.1 类库ios6.0 IOS调用相机 图片预览 图片上传 压缩图片 模拟器添加图片 目录[-] 判断是否支持相机,跳转到相机或相册界面 七.保存图片 高保真压缩图片方法 八.实现点击图片预览功能,滑动放大缩小,带动画 ps:模拟器添加图片 源码下载地址: 一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate ? 1