微信js上传图片并 展示,iphone下预览

Posted 学不断,思还乱

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信js上传图片并 展示,iphone下预览相关的知识,希望对你有一定的参考价值。

    $(‘.addphotos‘).click(function(){
                    var that = $(this);
                    var ua = navigator.userAgent.toLowerCase();
                    var ios;
                    console.log(ua);
                    if (/iphone|ipad|ipod/.test(ua)) {
                        ios = true;
                    } else {
                        ios = false;
                    }
                    console.log(ios);
                    wx.chooseImage({
                        count: 1, // 默认9
                        sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
                        sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
                        success: function (res) {
                            var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                            var localId = localIds[0];
                            wx.uploadImage({
                                localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
                                isShowProgressTips: 1, // 默认为1,显示进度提示
                                success: function (res) {
                                    var serverId = res.serverId; // 返回图片的服务器端ID
                                    var localData;
                                    if (ios || window.__wxjs_is_wkwebview) {
                                        wx.getLocalImgData({
                                            localId: localId,
                                            success: function (res) {
//                                        var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
                                                localData = res.localData.replace(‘jgp‘, ‘jpeg‘);
                                                var str = ‘<div class="shangchuan_img_xx">‘+
                                                    ‘<img class="zhaopian" src="‘+localData+‘"/>‘+
                                                    ‘<input type="hidden" name="photos[]" value="‘+serverId+‘">‘+
                                                    ‘<img class="xx_img" src="{MODULE_URL}static/img/xx.png"/>‘+
                                                    ‘</div>‘;
                                                that.before(str);
                                            },
                                            fail: function (res) {
                                                alert(‘该图片暂时无法查看‘)
                                            }
                                        });
                                    } else {
                                        localData = localId;
                                        var str = ‘<div class="shangchuan_img_xx">‘+
                                            ‘<img class="zhaopian" src="‘+localData+‘"/>‘+
                                            ‘<input type="hidden" name="photos[]" value="‘+serverId+‘">‘+
                                            ‘<img class="xx_img" src="{MODULE_URL}static/img/xx.png"/>‘+
                                            ‘</div>‘;
                                        that.before(str);
                                    }

                                }
                            });
                        }
                    });
                });

iphone下不能使用localId来预览图片,需要使用微信jssdk最新版本https://res.wx.qq.com/open/js/jweixin-1.2.0.js wx.getLocalImgData接口来获取图片base64数据进行预览

以上是关于微信js上传图片并 展示,iphone下预览的主要内容,如果未能解决你的问题,请参考以下文章

js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)

nodejs实现本地上传图片并预览功能

js 调用手机摄像头或相册并展示图片

django上传图片并且带有预览功能

JavaScript零基础入门 11:用JavaScript实现图片上传并预览

JavaScript零基础入门 10:用JavaScript实现图片上传并预览