1.前端页面:
<div class="fl-fill clearfix pr">
<span class="fl-indent fl pr">
@*<p class="pa">☆</p>*@
证 件 照 </span>
<button class="btn btn_primary" id="chooseImg">上传证件照</button>
<input id="ImgUrl" name="ImgUrl" type="hidden" required='required' oninvalid="setCustomValidity('证件照不能为空')" οninput="setCustomValidity('')" class="input fr" value=@ViewBag.ImgUrl />
<p id="login-Picture" class="pa">上传成功。</p>
<p id="login-Picture1" class="pa">请上传您的证件照。</p>
<img src=@ViewBag.ImgUrl />
</div>
2.Js调用微信上传图片接口
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title style="color:#f18700;"></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, width=device-width, user-scalable=no">
<base target="_self" />
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
@if (IsSectionDefined("Header"))
{
<script src="/Static/js/jquery-1.8.3.min.js"></script>
<script src="/Static/js/jquery.validate.min.js"></script>
<script src="/Static/js/jquery.form.js"></script>
<script src="/Static/js/jquery.metadata.js"></script>
@RenderSection("Header", false);
}
else
{
@RenderSection("SuccessHeader", false);
}
</head>
<body>
<div class="contaniner">
@RenderBody()
</div>
<script type="text/javascript">
wx.config({
debug: false,
appId: "@(ViewBag.AppId)",
timestamp: '@(ViewBag.Stamp)',
nonceStr: '@(ViewBag.Flag)',
signature: '@(ViewBag.MySignature)',
jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'getLocation', 'hideMenuItems' ,'chooseImage', 'previewImage', 'uploadImage','downloadImage'] //分享到朋友圈,分享给朋友
});
wx.ready(function () {
//如果使用自定义按钮点击事件来分享,则不需要在ready内调用
//这里我没有使用自定义按钮,所以需要在ready内调用
//wx.checkJsApi判断当前客户端版本是否支持指定JS接口,备注:checkJsApi接口是客户端6.0.2新引入的一个预留接口,第一期开放的接口均可不使用checkJsApi来检测。
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'getLocation',
'hideMenuItems',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
],
success: function (res) { } //alert(JSON.stringify(res));
});
//微信上传图片接口
/*上传图片*/
$('#chooseImg').click(function () {
//alert("选择图片")
wx.chooseImage({
count: 1, // 默认9,这里只能选一张照片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
//sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
// alert(localIds);
//得到上传图片的本地id
if (upimg(localIds) !== "") {
alert("图片上传失败!");
}
}
//特别要注意:微信返回的是weixin://resourceid/d74a9db691e1a0dd0a04694c496eeb96f,上传时候只要最后的ID而img要全部
}); //选择照片结束
return false;
});
//上传到本地服务器
function downimg(servId, locIds) {
$.ajax({
url: '/Ajax/Ajax_ProjectManager.ashx',
type: 'post',
dataType: 'text',
async: false,
data: {"ACCESS_TOKEN":'@(ViewBag.myTicket)', "serverid": servId },
beforSend: function () {
},
success: function (res) {
if (res != "") {
$("#ImgUrl").val(res);
document.getElementById("ImgUrl").innerHTML = res;
$("#login-Picture").show();
$("#login-Picture1").hide();
}
else {
$("#login-Picture").hide();
alert("上传失败!");
}
},
error: function (e) {
$("#login-Picture").hide();
alert("上传失败!");
}
});
} //上传图片接口
function upimg(locIds) {
var imageurnew = "";
var localId = locIds.pop(); //pop() 方法用于删除数组的最后一个元素并返回删除的元素。
//alert("上传图片得到的localid:"+localId);
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID , res.serverId 就是 media_id,根据它去微信服务器读取图片数据
//alert("微信服务器端的照片ID:" + serverId);
//loadStart("查询中...", "a", true);
setTimeout(function () {
//alert("上传图片接口调用完,该上传到服务器中");
imageurnew= downimg(serverId, locIds);
//alert("上传服务器结束"+imageurnew);
}, 1000);
}
}); //上传结束
return imageurnew;
}
});
</script>
</body>
</html>
3.调用一般处理程序:
using System;
using System.Net;
using System.Web;
using Yasn.Utility;
namespace YasnNY.ajax
{
/// <summary>
/// Ajax_ProjectManager 的摘要说明
/// </summary>
public class Ajax_ProjectManager : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/jpeg";
//context.Response.Write("Hello World");
string MEDIA_ID = context.Request.Params["serverid"];
string ACCESS_TOKEN = context.Request.Params["ACCESS_TOKEN"];
Utils.WriteLog("ACCESS_TOKEN"+ ACCESS_TOKEN+ " MEDIA_ID为:" + MEDIA_ID);
string msg=InsertImg(ACCESS_TOKEN, MEDIA_ID);
context.Response.Write(msg);
}
public string InsertImg(string ACCESS_TOKEN, string MEDIA_ID)
{
Utils.WriteLog("进入上传图片到服务器方法");
string file = string.Empty;
string content = string.Empty;
string strpath = string.Empty;
string savepath = string.Empty;
string stUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + ACCESS_TOKEN + "&media_id=" + MEDIA_ID;
HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(stUrl);
Utils.WriteLog("图片路径:"+ stUrl);
req.Method = "GET";
using (WebResponse wr = req.GetResponse())
{
HttpWebResponse myResponse = (HttpWebResponse)req.GetResponse();
strpath = myResponse.ResponseUri.ToString();
Utils.WriteLog("接收类别:" + myResponse.ContentType);
WebClient mywebclient = new WebClient();
savepath = System.Web.HttpContext.Current.Server.MapPath("Image")+ "\\"+ DateTime.Now.ToString("yyyyMMddHHmmssfff") + (new Random()).Next().ToString().Substring(0, 4) + ".jpg";
Utils.WriteLog("路径" + savepath);
try
{
//下载到服务器
mywebclient.DownloadFile(strpath, savepath);
file = savepath;
}
catch (Exception ex)
{
savepath = ex.ToString();
}
}
Utils.WriteLog("文件:" + file.Substring(10) );
Utils.SetCookie("UploadURL", file.Substring(10));
return file.Substring(10);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}