angularjs多张图片上传

多张图片上传
js：

 //创建一个FileReader接口
        $scope.reader = new FileReader();   
        //用于绑定提交内容，图片或其他数据
        $scope.form = { image:{},};
        //用于存放图片的base64
        $scope.thumb = {};      
        //用于循环默认的‘加号’添加图片的框
        $scope.thumb_default = { 1111:{}};
       //单次提交图片的函数
        $scope.img_upload = function(files) {       
            $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 $querydata = new FormData();      
            $querydata.append('upfile',files[0]);
            // $querydata.append('ossfolder',$scope.guid);
            $scope.imgarr=[];
            $http({
                method: 'POST',
                url: ossUploadService + '/upload/file',
                data: $querydata,
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).success(function (res) {
                if(res.success){
                    $scope.form.image[$scope.guid] = res.data.img_path;
                    $scope.thumb[$scope.guid].status = 'success';
                    $scope.imgarr.push($scope.form)
                }
            }).error(function (res) {
                toaster.pop('info', "", res.message);
            })

        };

        //删除图片
        $scope.img_del = function(key) {    
            var guidArr = [];
            for(var p in $scope.thumb){
                guidArr.push(p);
            }
            delete $scope.thumb[guidArr[key]];
            delete $scope.form.image[guidArr[key]];
        };

html：
 

<div class='download-imgbox'>
       <div class='thumbimg' ng-repeat="item in thumb">
              <label><img ng-src="{{item.imgSrc}}"/> </label>
              <span ng-if="item.imgSrc" ng-click="img_del($index)"></span>
       </div>
       <div ng-repeat="item in thumb_default" class='csimg'>
               <label class="xuanze">
                 <input type="file" id="inputfile" accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)" style='display:none;'/>
                 </label>
       </div>
 </div>

css：

.download-imgbox{
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin: 0.2rem auto;
}
.thumbimg{
     1.9rem;
    height: 1.9rem;
    overflow: hidden;
    position: relative;
    margin: 0.13rem;
}
.thumbimg img{
     1.9rem;
    height: 1.9rem;
}
.thumbimg span{
    display:block;
     0.4rem;
    height: 0.4rem;
    background: url(/dk/images/Close.png) no-repeat center center;
    background-size: 0.4rem 0.4rem;
    position: absolute;
    top:0;
    right:0;
    background-color: rgba(255, 255, 255, 0.5);
}
.csimg{
     1.9rem;
    height: 1.9rem;
    overflow: hidden;
    position: relative;
    margin: 0.13rem;
}
.csimg .xuanze{
    position: absolute;
    top:0;
    left:0;
     1.9rem;
    height: 1.9rem;
    background:url(/dk/images/ai-up-img.png) no-repeat center center;
    background-size: 100% 100%;
}