微信jssdk上传图片,一张一张的上传 和 一次性传好几张

摘要:
//html模板<divclass=“zhaopin_3_2”>&书信电报;divide=“bbb”></div>&书信电报;imgsrc=“/Public/Home/images/jia.png”class=“avatar-round1”></div>此方法允许一次多次上载//js控件{:wx_jssdk_config(“false”)}<剧本
//html模板

<div class="zhaopin_3_2">
            <div id="bbb"></div>
            <img src="/Public/Home/images/jia.png" class="avatar-round1">
        </div>

此方法是一次可多张上传

//js控制

    
{:wx_jssdk_config("false")}
<script>
        var headimgurl;
        var y=0;
        var i =0;
        $('.avatar-round1').click(function(){
            if(y<5){
                var html = $('#bbb').html();
                wx.chooseImage({
                    count: 5-i,
                    success: function (res) {
                        var localIds = res.localIds;
                        syncUpload(localIds);
                    }
                });
                
                var syncUpload = function(localIds){
                    var localId = localIds.pop();
                    wx.uploadImage({
                        localId: localId,
                        isShowProgressTips: 1,
                        success: function (res) {
                            i++;
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            html += '<div class="uploadImg img"><div class="close"><img src="http://t.zoukankan.com/__HOME__/images/close.png" onclick="del_imgy(this);"> </div>'+
                                        '<img src="http://t.zoukankan.com/zc290987034-p-7651674.html'+localId+'"/><input type="hidden" name="image[]" value="'+serverId+'"></div>';
                            //其他对serverId做处理的代码
                            if(localIds.length > 0){
                                syncUpload(localIds);
                            }else{
                                $('#bbb').html(html);
                            }
                        }
                    });
                }; 
            } 
        });    

function del_img(dom){
    $(dom).parents('.uploadImg').remove();
}
</script>

//此方法可一张一张的上传

{:wx_jssdk_config("false")}
<script>
        var headimgurl;
        $('.avatar-round1').click(function(){
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                success: function(res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                    // 上传照片
                    wx.uploadImage({
                        localId: '' + localIds,
                        isShowProgressTips: 1,
                        success: function(res) {
                            serverId = res.serverId;
                            $(localIds).each(function(index, el) {
                                iii=localIds[index];

                            });
                            var html = $('#bbb').html();
                            html += '<div   id="tuji"><div class="close"><img src="http://t.zoukankan.com/__HOME__/images/close.png" onclick="del_img(this);"> </div>'+
                                '<img src="http://t.zoukankan.com/zc290987034-p-7651674.html'+iii+'"><input type="hidden" name="image[]" value="'+serverId+'"></div>';
                            $('#bbb').html(html);
                        }
                    });
                }
            });
        });


function del_img(dom){

            $(dom).parents('.uploadImg').remove();

}
 </script>

下面使用的方法都是一样的

//封装的方法
//我的是放在  function.php文件里

//下面这两个方法需要用到微信的配置

/**
 * 直接生成微信jssdk_config
 * @echo string $jssdk Jssdk_config
 * @author 5heAtMin9 <sheatming@foxmail.com>
 */

function wx_jssdk_config($debug='true'){
    $getSignPackage = wx_getSignPackage();
    $jssdk = '<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>';
    $jssdk .= '<script>
    wx.config({
        debug: '.$debug.', 
        appId: "'.$getSignPackage['appId'].'",
        timestamp: "'.$getSignPackage['timestamp'].'",
        nonceStr: "'.$getSignPackage['nonceStr'].'",
        signature: "'.$getSignPackage['signature'].'",
        jsApiList: ["checkJsApi","onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ", "onMenuShareWeibo","onMenuShareQZone","hideMenuItems","showMenuItems","hideAllNonBaseMenuItem","showAllNonBaseMenuItem","translateVoice","startRecord","stopRecord","onVoiceRecordEnd","playVoice","onVoicePlayEnd","pauseVoice","stopVoice","uploadVoice","downloadVoice","chooseImage","previewImage","uploadImage","downloadImage","getNetworkType","openLocation","getLocation","hideOptionMenu","showOptionMenu","closeWindow","scanQRCode","chooseWXPay","openProductSpecificView","addCard","chooseCard","openCard"],
    });
</script>';
    echo $jssdk;
}




//控制器里需要用到此方法
/** * 保存图片、视频、语音消息 * @param string $media_id 素材ID * @param string $save_path 保存路径 * @return string $return 返回jpg文件路径 * @author 5heAtMin9 <sheatming@foxmail.com> */ function wx_msg_save_file($media_id, $msgtype, $save_path='./Uploads/Wechat/') { switch($msgtype){ case 'image': $save_path .= 'image/'; $ex = '.jpg'; break; case 'video': $save_path .= 'video/'; $ex = '.mp4'; break; case 'voice': $save_path .= 'voice/'; $ex = '.amr'; break; default : return '参数错误'; break; } if(!is_dir($save_path)){ mkdir($save_path); } $url = 'http://file.api.weixin.qq.com/cgi-bin/media/get?access_token='.wx_get_access_token() -> access_token.'&media_id='.$media_id; $filename = $msgtype."_".rand(1111,9999).time().$ex; downAndSaveFile($url,$save_path.$filename); $ready_upload = $save_path.$filename;// 文件在本地的位置 return $ready_upload; }
//在控制器里需要这样用

if(I('image')!=''){
                foreach(I('image') as $k=>$v){
                    $aa[$k]=wx_msg_save_file($v, 'image');
                }
                $_POST['picture']=implode(',',$aa);
            }

免责声明:文章转载自《微信jssdk上传图片,一张一张的上传 和 一次性传好几张》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇SQL case whenJAVA WEB项目文件夹上传下载解决方案下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vant upload图片上传 (file文件)

     <div class="upload-img">   <div v-for="(item,index) in uploadImages" :key="index">     <img :src="http://t.zoukankan.com/item">   </div>   <!--...

Jmeter(三) 从上传图片来入门Jmeter

用Jmeter上传用户头像到人人网 先用抓包工具Fiddler把上传操作的报文抓取下来 开启Jmeter,在测试计划中创建一个线程组,取名为“图片上传” 再在线程组中创建一个HTTP请求 在请求报文中可以看到有一个<file>的参数,其实就是图片名称。 在Jmeter的文件上传中把图片路径配置上去 配置上传参数,接口URL,请求方式...

asp.net+扫描仪+图片上传

问题: IE浏览器下使用Activex插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同、文件、资料等)扫描并将扫描图像保存到服务器,可以用于合同管理、档案管理等。 通过插件方式调用扫描仪扫描并获取图像,可以减少用户操作,减少操作出错,如一次扫描量大也可以使用连续扫描,由系统对扫描文件进行编号或进行其他处理。 web页面中只需通过js调用后启动扫描...

jmeter上传图片附件实践

一、根据定义的接口文档,通过Jmeter发起请求 接口请求入参 { "consignorPrice": 299, "manageNo": "MMOUXX", "waybillNo": "100514000141", "driverPrice": 273, "cargoWeight": 29.09, "oil": 34, "loa...

java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)

最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.currentThread().getContextClassLoader().getResource("/").getPath().replaceAll("WEB-INF...

nodejs学习笔记三——nodejs使用富文本插件ueditor

  在做自己的nodejs项目的时候遇到需要使用ueditor。原来下载的是ueditor的jsp版本。目录如下     在ueditor.config.js中有配置服务器home路径(这个home路径能找到ueditor文件夹,可以使用这个路径访问ueditor内的静态资源,比如我的top.ctx为http://localhost:8080,那么我可以通...