微信网页添加照片，显示图片，删除照片，上传照片，查看照片

进入页面，调用微信功能

        wx.ready(function () {
          wx.checkJsApi({
                jsApiList: [
                    'chooseImage',
                    'uploadImage',
                    'getLocalImgData',
                    'downloadImage',
                    'previewImage',
                ],
                success: function (res) {
                    // console.log(JSON.stringify(res));
                }
            });
        });

点击事件，调用摄像头接口

 var images = []; // 保存需要上传的图片信息
 var i = 0; // 上传递归计数
 var localIds = []; // 暂存本次上传的照片

$("#addphoto").click(function () {
       wx.ready(function () {
           wx.chooseImage({
               count: 9, // 默认9
               sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
               sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
               success: function (res) {
                   //显示图片
                   var total = images.length + res.localIds.length; // 累计上传的图片数量，用于判断是否超出9张的限制
                   localIds = res.localIds; // 更新本次待上传图片
                   i = 0; // 清空累加计数
                   if (total >= 9) {
                       var num = total - 9;
                       if (num > 0) {
                           localIds = res.localIds.slice(0, -num); // 更新本次待上传图片
                       }
                   }
                   //上传图片
                   upload();
               },
               fail: function (res) {

               }
           });
       });
   })

上传图片到微信服务器，并且显示图片到页面
jquery添加元素到页面，绑定事件需要注意
一定要onclick绑定，单纯设定class或者id无法获取元素

// 循环上传图片
   function upload() {
       if (i < localIds.length) {
           wx.uploadImage({
               localId: localIds[i].toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
               isShowProgressTips: 1, // 默认为1，显示进度提示
               success: function (res) {
                   images.push({localId: localIds[i], serverId: res.serverId}) //图片上传完成之后，进行图片的下载，图片上传完成之后会返回一个在腾讯服务器的存放的图片的ID--->serverId
                   // 界面上追加显示添加的照片，span为删除图片的小图标
                   var img = $('<div class="add-pho"><img class="photo-item" onclick="showGrallery(\'' + localIds[i] + '\')"><span class="cancel" onclick="deleteImg(this, \'' + localIds[i] + '\')"></span></div>');
                   img.find('.photo-item').attr("src", localIds[i]);
                   $('#photo').prepend(img);
                   if (images.length == 9) {
                      alert('最多传入9张')；
                       $('.addphoto').parent().hide(); // 隐藏添加按钮
                   }
                   i++;
                   upload();
               }
           });
       }
   }

在上传到自己的服务器前，可在页面删除图片(事件在上一步骤绑定)

function deleteImg(span, id) {
       $(span).parent().remove();
       $.each(images, function (k) {
           if (images[k].localId == id) {
               images.splice(k, 1);
           }
       });
   }

查看图片

function showGrallery(src) {
       var ids = [];
       $.each(images, function (k) {
           ids.unshift(images[k].localId);
       });
       wx.previewImage({
           current: src, // 当前显示图片的http链接
           urls: ids // 需要预览的图片http链接列表
       });
   }

最后将获取到的images中serverId传入后台/拼接serverid

var photos = []; 

       $.each(images, function (k) { 

           photos.unshift(images[k].serverId); 

       }); 

photos = photos.join('/');

后台处理

 if ($photo) {

           $photos = explode("/", $photo); 

           foreach ($photos as $val) { 

               $access_token = $this->access_token(); 

               $media_id = $val; 

               $url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" . $access_token . "&media_id=" . $media_id; 

               //文件名 

               $filename = date('YmdHis') . rand(1000, 9999) . '.jpg'; 

               //目录名 

               $targetDirectory = public_path() . '/upload/' . date('Ymd');  

               //保存文件名和目录名 

               array_push($images, $targetDirectory . '/' . $filename); 

               // 创建文件 

               if (!file_exists($targetDirectory)) { 

                   mkdir($targetDirectory, 0777, true); 

               } 

               //保存文件 
               //把整个文件读入一个字符串中 

               $image = file_get_contents($url); 

               //把一个字符串写入文件中 

               file_put_contents($targetDirectory . '/' . $filename, $image); //Where to save the image 

}

结束!