多张图片上传
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" οnchange="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{width: 1.9rem;height: 1.9rem;overflow: hidden;position: relative;margin: 0.13rem;}.thumbimg img{width: 1.9rem;height: 1.9rem;}.thumbimg span{display:block;width: 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{width: 1.9rem;height: 1.9rem;overflow: hidden;position: relative;margin: 0.13rem;}.csimg .xuanze{position: absolute;top:0;left:0;width: 1.9rem;height: 1.9rem;background:url(/dk/images/ai-up-img.png) no-repeat center center;background-size: 100% 100%;}
