如何上传图片 · 豆信2.0开发手册

#### **1、JS接口安全域名设置** 登录微信公众号后台，公众号设置-功能设置。 ![](https://box.kancloud.cn/2016-01-13_56960da7a9bc5.jpg) ![](https://box.kancloud.cn/2016-01-13_56960db2430be.jpg) #### **2、实现步骤** #### (1)继承jssdk模板。 `<extend name="Base/jssdk_common" /> <block name="html"> <!DOCTYPE html> <html> ..... ..... </html> </block>` > 要使用豆信封装的快速实现微信自定义的函数，首先必须要继承豆信的jssdk模板。 #### (2)页面中加入js代码 `<script type="text/javascript"> // jssdk注册成功后执行 wx.read(function(){ //$count 计算上传图片的数量 uploadImages($count,downMediaSuccess,downMediaError); }); //下载图片成功 function downMediaSuccess(data){ //处理下载完后的图片 } //下载失败 function downMediaError(){ //处理下载失败 } </script>` #### **3、代码解析** >直接上案例 `<extend name="Base/jssdk_common" /> <block name="html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>萌宝投票</title> <meta name="keywords" content=""> <meta name="description" content=""> </script> </head> <body><div class="upload clearfix"> <div>上传照片2-5张:</div> <div class="upload_area clearfix"> <ul id="imglist" class="post_imglist"> </ul> <div class="upload_btn"> <button type="button" id="chooseImage" value="上传"></button> </div> </div> </div> </body> <script type="text/javascript"> var viewImg = $("#imglist"); var imgIndex = 0; var i = 0; var length = 0; // jssdk注册成功后执行 wx.ready(function () { $("#chooseImage").click(function(){ var len = $("#imglist li").length; //判断已上传图片的数量 if(len >= 5){ alert('对不起,您最多只能上传5张图片!'); }else{ var count = 5 - len; //判断剩余上传的数量 uploadImages(count, downMediaSuccess, downMediaError); } }) }); // 下载图片成功 function downMediaSuccess(data) { viewImg.append("<li><span class='pic_time'><span class='p_img'></span><em>50%</em></span></li>"); //下载后的图片插入li viewImg.find("li:last-child") .html("<span class='del'></span>" + "<img class='wh60' src='" + data['picture_url'] + "'/>" + "<input type='hidden' id='file" + imgIndex + "' name='file_upload[]' value='" + data['cover_id'] + "'>"); //向末尾li插入图片 $(".del").on("click",function(){ //删除已上传的图片 $(this).parent('li').remove(); }); imgIndex++; } function downMediaError() { alert("对不起上传失败,请重新上传！"); } </script>` >效果图 ![](https://box.kancloud.cn/2016-01-24_56a3c2f08b8b7.png)