【原创】.Net 微信 JS-SDK图片、语音上传接口的实现（MVC）-（一 、上传图片）

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

图像接口
拍照或从手机相册中选图接口
wx.chooseImage({
    count: 1, // 默认9
    sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});
预览图片接口
wx.previewImage({
    current: ‘‘, // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
});
上传图片接口
wx.uploadImage({
    localId: ‘‘, // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
    }
});
备注：上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id。
下载图片接口
wx.downloadImage({
    serverId: ‘‘, // 需要下载的图片的服务器端ID，由uploadImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var localId = res.localId; // 返回图片下载后的本地ID
    }
});

var imgList = [
                ‘http://h.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c70a6b76782d6277f9f2ff850.jpg‘,
            ];
            wx.previewImage({
                current: imgList[0],
                urls:  imgList
            });

  <a href="javascript:void(0);" onclick="javascript:chooseImage();">选择图片</a>
        <a href="javascript:void(0);" onclick="javascript:uploadImage();">图片上传</a>
        <a href="javascript:void(0);" onclick="javascript:downloadImage();">图片下载</a>
        <a href="javascript:void(0);" onclick="javascript:previewImage();">图片预览</a>
        <div id="img">选择的图片</div>
        <div id="img2"> 下载的图片</div>



<script type="text/javascript">
        wx.config({
            debug: false,
            appId: ‘@ViewBag.JSAPI.appId‘, // 必填，公众号的唯一标识
            timestamp: @ViewBag.JSAPI.timestamp, // 必填，生成签名的时间戳
            nonceStr: ‘@ViewBag.JSAPI.nonceStr‘, // 必填，生成签名的随机串
            signature: ‘@ViewBag.JSAPI.signature‘,// 必填，签名，见附录1
            jsApiList: [
              ‘chooseImage‘,
              ‘previewImage‘,
              ‘uploadImage‘,
              ‘downloadImage‘,
              ‘checkJsApi‘,
              ‘startRecord‘,
              ‘stopRecord‘,
              ‘onVoiceRecordEnd‘,
              ‘playVoice‘,
              ‘pauseVoice‘,
              ‘stopVoice‘,
              ‘onVoicePlayEnd‘,
              ‘uploadVoice‘,
              ‘downloadVoice‘,
              ‘getNetworkType‘
            ]
        });

        wx.ready(function () {
            //返回网络类型
            wx.getNetworkType({
                success: function (res) {
                    var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
                    jQuery(function() {
                        $(‘#networkType‘).html(networkType);
                    });
                }
            });
        });

        // 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
        };

        function chooseImage() {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    jQuery(function(){
                        $.each(res.localIds, function(i, n){
                            $("#img").append(‘<img src="‘+n+‘" style="width:50px; height:50px;"/> <br />‘);
                        });
                    });
                }
            });
        }

        // 5.2 图片预览
        function previewImage()
        {
            var imgList = [
                ‘http://h.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c70a6b76782d6277f9f2ff850.jpg‘,
            ];
            wx.previewImage({
                current: imgList[0],
                urls:  imgList
            });
        }

        // 5.3 上传图片
        var i = 0, length =0;
        function uploadImage(){
            if (images.localId.length == 0) {
                alert(‘请先使用选择图片按钮‘);
                return;
            }
            length= images.localId.length;
            upload();
        }

        function upload() {
            wx.uploadImage({
                localId: images.localId[i],
                success: function (res) {
                    i++;
                    //alert(‘已上传：‘ + i + ‘/‘ + length);
                    images.serverId.push(res.serverId);
                    $("#img2").append(‘<img src="‘+res.localId+‘"  style="width:50px; height:50px;"/ /> <br />‘);
                    downloadImage(res.serverId);
                    if (i < length) {
                        upload();
                    }
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        }

        //下载图片
        function downloadImage(serverId)
        {
            $.get("@Url.Action("WeixinDownloadImage","Home")",{mediaId:serverId},function(data){
                alert(data);
            },"json")
        }

        wx.error(function (res) {
            alert(res.errMsg);
        });

</script>