<div class="list_upload item bg_white">

   　　<div class="itemImg pic_upload" ng-repeat="item in thumb">

      　　 <!-- 采用angular循环的方式，对存入thumb的图片进行展示 -->

           <img ng-src="{{item.imgSrc}}" alt=""/>

           <span class="itemImgClose" ng-if="item.imgSrc" ng-click="img_del($index)"><i class="ion-android-close"></i></span>

       </div>

       <div class="item_file" ng-repeat="item in thumb_default" ng-if="addImg">

            <!-- 这里之所以写个循环，是为了后期万一需要多个‘加号’框 -->

            <div class="item pic_upload"> <i class="icon ion-android-add"></i>

            　　添加图片<input type="file" id="one-input"  accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)"/>

        　　</div>

    　　</div>

13　　</div>

      $scope.reader = new FileReader();   //创建一个FileReader接口

      $scope.thumb = {};      //用于存放图片的base64

      $scope.imagNmae = [];

      //监听照片的变化

      console.log($scope.thumb);

      $scope.thumb_default = {    //用于循环默认的‘加号’添加图片的框

        1111:{}

      };

      //用于压缩图片的canvas

      var canvas = document.createElement("canvas");

      var ctx = canvas.getContext('2d');

      //瓦片canvas

      var tCanvas = document.createElement("canvas");

      var tctx = tCanvas.getContext("2d");

      //ionic post请求头部

      var transFn = function (obj) {

          return $httpParamSerializerJQLike(obj);

        },

        postCfg = {

          headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},

          transformRequest:transFn

        };

      var flag = 0; //标志位

      $scope.addImg = true;

      var maxSize = 100*1024; //图片大小为100kb

      $scope.img_upload = function(files) {       //单次提交图片的函数

        flag++;

        var size = files[0].size / 1024 > 1024 ? (~~(10 * files[0].size / 1024 / 1024)) / 10 + "MB" : ~~(files[0].size / 1024) + "KB";

        $scope.guid = (new Date()).valueOf();   //通过时间戳创建一个随机数，作为键名使用

        $scope.reader.readAsDataURL(files[0]);  //FileReader的方法，把图片转成base64

        $scope.reader.onload = function (ev) {

          $scope.$apply(function () {

            $scope.thumb[$scope.guid] = {

              imgSrc: ev.target.result,  //接收base64

            }

          });

          //上传图片的调用

          var result = this.result;

          var img = new Image();

          img.src = result;

          if (result.length <= maxSize) {

            upload(result, files[0].type);

            return;

          }

          //图片加载完毕之后进行压缩，然后上传

          if (img.complete) {

            callback();

          } else {

            img.onload = callback;

          }

          function callback() {

            var data = compress(img);

            upload(data, files[0].type);

            img = null;

          }

        };

        //判断图片的数量

        if(flag >= 3){

          $scope.addImg = false;

        }

      };

      $scope.img_del = function(key) {    //删除，删除的时候thumb和form里面的图片数据都要删除，避免提交不必要的

        flag--;

        console.log(key);

        var guidArr = [],ImgId = [];

        for(var p in $scope.thumb){

          guidArr.push(p);

        }

        delete $scope.thumb[guidArr[key]]; //删除图片

        for(var s in $scope.imagNmae){

          ImgId.push(s);

        }

        delete $scope.imagNmae[ImgId[key]]; //删除图片id

        if(flag < 3){

          $scope.addImg = true;

        }

      };

       //使用canvas对大图片进行压缩

      var compress = function(img) {

        var initSize = img.src.length;

        var width = img.width;

        var height = img.height;

        //如果图片大于四百万像素，计算压缩比并将大小压至400万以下

        var ratio;

        if ((ratio = width * height / 4000000) > 1) {

          ratio = Math.sqrt(ratio);

          width /= ratio;

          height /= ratio;

        } else {

          ratio = 1;

        }

        canvas.width = width;

        canvas.height = height;

        //铺底色

        ctx.fillStyle = "#fff";

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        //如果图片像素大于100万则使用瓦片绘制

        var count;

        if ((count = width * height / 1000000) > 1) {

          count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片

          //计算每块瓦片的宽和高

          var nw = ~~(width / count);

          var nh = ~~(height / count);

          tCanvas.width = nw;

          tCanvas.height = nh;

          for (var i = 0; i < count; i++) {

            for (var j = 0; j < count; j++) {

              tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);

              ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);

            }

          }

        } else {

          ctx.drawImage(img, 0, 0, width, height);

        }

        //进行最小压缩

        var ndata = canvas.toDataURL('image/jpeg', 0.1);

        //console.log('压缩前：' + initSize);

        // console.log('压缩后：' + ndata.length);

        //console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");

        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

        return ndata;

      };

     //图片上传，

      var upload = function (basestr,type) {

        var text = basestr.split(",")[1]; //截取图片字节流

        var obj = {

          "参数名":"参数"

        };

        $http.post("接口链接",obj,postCfg).success(function (data) {

        }).error(function(err){

          $scope.loadMore = true;

          $ionicLoading.show({

            template: "无法加载数据。请稍后再试。",

            duration: 2000

          });

        });

      };