手機端調用微信js-sdk圖片上傳與預覽

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
 function weixinupimg(){
 $.ajax({
 type: "POST",
 url: API_URL+"ass/user/js-sign",
 data: {
 url: location.href,
 },
 dataType: "json",
 async: false,
 success: function (d) {
 wx.config({
 debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
 appId:d.data.appId,// 必填，公衆號的惟一標識
 timestamp:d.data.timestamp, // 必填，生成簽名的時間戳
 nonceStr:d.data.nonceStr , // 必填，生成簽名的隨機串
 signature: d.data.signature,// 必填，簽名
 jsApiList: [ 'chooseImage', 'uploadImage',] // 必填，須要使用的JS接口列表
 });
 wx.ready(function () {
 $(".thubimclick1").on('click',function () {
 var ziduan = $(this).data('name');
 wx.chooseImage({ //調取攝像頭和相冊
 count: 1, // 最多能夠選擇的圖片張數，默認9
 sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認兩者都有
 sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認兩者都有
 success: function (res) {
 var localIds = res.localIds; // 返回選定照片的本地ID列表（手機上操做就是手機端的ID列表，是一個數組），localId能夠做爲img標籤的src屬性顯示圖片
 console.log(res)
 wx.uploadImage({ //上傳到微信服務器
 localId: localIds[0].toString(), // 須要上傳的圖片的本地ID，由chooseImage接口得到
 isShowProgressTips: 1, // 默認爲1，顯示進度提示
 success: function (result) {
 var serverId = result.serverId; // 返回圖片的服務器端ID 圖片下載到本地服務,此處須要後臺去處理了，
 // console.log(res)
 // 能夠將serverId傳給後臺，用於存放在本身服務器上
 // if (serverId) {
 // // $(".thumbimg").css("display","inline-block");
 // // $(".thumbimg").find("img").attr("src", localIds);
 // $('input[name = "'+ziduan+'"]').next().css({'display':'inline-block'});
 // $('input[name = "'+ziduan+'"]').next().children().attr('src',localIds);//將壓縮後的圖片顯示預覽
 // }
 // return false;
 $.ajax({
 url: API_URL +'ass/wechatupload/wechat-upload?gid=' + getUrlParam('gid') + '&memtype=' + getUrlParam('memtype'),
 data:{
 imgserverid:serverId,
 source_id:getUrlParam('gid'),
 tablename:getUrlParam('memtype')==22?'ass_company':"ass_individual",//三目運算符
 //tablename:getUrlParam('memtype')==22?'ass_company':"ass_individual",//三目運算符
 },
 type: 'post',
 success:function(data){
 if(data.status == 1){
 console.log($('input[name = "'+ziduan+'"]'));
 // $(this).parent().prev().children('.grad3yulan').attr('src',data.data.img);
 $('input[name = "'+ziduan+'"]').next().show();
 $('input[name = "'+ziduan+'"]').next().css({'display':'inline-block'});
 var bb=$('input[name = "'+ziduan+'"]').next().children().attr('src',data.data.file);//將壓縮後的圖片顯示預覽
 $('input[name = "'+ziduan+'"]').attr('name');//經過input 獲取到name的值,後臺須要此參數須要保留
 $('input[name = "'+ziduan+'"]').val(data.data.id);
 }else{
 layer.msg(data.msg);
 }
 },
 error:function () {
 layer.msg('數據有誤！');
 }
 })
 // console.log(serverId);
 }
 });
 },
 fail: function() {},
 complete: function() {}
 });
 })
 })

 },
 error: function (){
 alert("發生錯誤,請諮詢公衆平臺客服");
 }
 });
 }
</script>
方法二
<script>
    $.ajax({
        type: "POST",
        url: API_URL+"ass/user/js-sign",
        data: {
            url: location.href,
        },
        dataType: "json",
        async: false,
        success: function (d) {
            wx.config({
                debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                appId:d.data.appId,// 必填，公衆號的惟一標識
                timestamp:d.data.timestamp, // 必填，生成簽名的時間戳
                nonceStr:d.data.nonceStr , // 必填，生成簽名的隨機串
                signature: d.data.signature,// 必填，簽名
                jsApiList: [ 'chooseImage', 'uploadImage','downloadImage','previewImage'] // 必填，須要使用的JS接口列表
            });
            wx.ready(function () {
                $(".thubimclick1").click(function () {
                    console.log(85858)
                    var ziduan = $(this).data('name');
                    wx.checkJsApi({
                        jsApiList: [
                            'chooseImage',
                            'previewImage',
                            'uploadImage',
                            'downloadImage'
                        ],
                        success: function (res) {
                            //alert(JSON.stringify(res));
                            //alert(JSON.stringify(res.checkResult.getLocation));
                            if (res.checkResult.getLocation == false) {
                                alert('你的微信版本過低，不支持微信JS接口，請升級到最新的微信版本！');
                                return;
                            }else{
                                wxChooseImage();
                            }
                        }
                    });
                })
            });
            var images = {
                localId: [],
                serverId: []
            };
            //拍照或從手機相冊中選圖接口
            function wxChooseImage() {
                wx.chooseImage({
                    success: function(res) {
                        images.localId = res.localIds;
                        // alert('已選擇 ' + res.localIds.length + ' 張圖片');
                        if (images.localId.length == 0) {
                            // alert('請先使用 chooseImage 接口選擇圖片');
                            return;
                        }
                        var i = 0, length = images.localId.length;
                        images.serverId = [];
                        function upload() {
                            //圖片上傳
                            wx.uploadImage({
                                localId: images.localId[i],
                                success: function(res) {
                                    i++;
                                    images.serverId.push(res.serverId);
                                    //圖片上傳完成以後，進行圖片的下載，圖片上傳完成以後會返回一個在騰訊服務器的存放的圖片的ID--->serverId
                                    wx.downloadImage({
                                        serverId: res.serverId, // 須要下載的圖片的服務器端ID，由uploadImage接口得到
                                        isShowProgressTips: 1, // 默認爲1，顯示進度提示
                                        success: function (res) {
                                            var localId = res.localId; // 返回圖片下載後的本地ID
                                            //經過下載的本地的ID獲取的圖片的base64數據，經過對數據的轉換進行圖片的保存
                                            wx.getLocalImgData({
                                                localId: localId, // 圖片的localID
                                                success: function (res) {
                                                    var localData = res.localData; // localData是圖片的base64數據，能夠用img標籤顯示
                                                    //經過ajax來將base64數據轉換成圖片保存在本地
                                                    $(".thumbimg").css("display","inline-block");
                                                    $(".thumbimg").find("img").attr("src", localData);
                                                }
                                            });
                                        }
                                    });
                                    if (i < length) {
                                        upload();
                                    }
                                },
                                fail: function(res) {
                                    alert(JSON.stringify(res));
                                }
                            });
                        }
                        upload();
                    }
                });
            }
            },
        error: function (){
            alert("發生錯誤,請諮詢公衆平臺客服");
        }
    });
</script>