image-upload.html:<button class="btn btn-default" ngf-select="selectImage($files)" ngf-pattern="'image/*'" ngf-multiple="true"> 选择图片</button><span>(支持多张图片拖拽上传)</span><div class="row cropArea" style="padding: 0 15px 15px 0" ngf-drop ngf-pattern="'image/*'" ng-model="files" ngf-multiple="true"> <img-crop image="files || data.defaultImage" resule-image="files"></img-crop> <div ngf-no-file-drop>该浏览器不支持拖拽上传。</div> <div class="col col-xs-4 text-left" style="margin-top: 15px;" ng-repeat="image in mulImages"> <div ng-repeat="oneImage in image"> <img ngf-src="oneImage || data.defaultImage" class="img-responsive" style="width:200px; height: 200px; max-width:500px;"/> </div> </div></div>//<img-crop></img-crop>定义了图片可以拖拽的位置//<img/>排列显示上传的多张图片 style.css:.cropArea { background: #E4E4E4; min-height: 230px; height: auto; margin: 15px; margin-right: 0;}image-upload-ctrl.js:$scope.data = { file: null, defaultImage: commonSvc.defaultImage};$scope.mulImages = [];$scope.$watch('files', function () { $scope.selectImage($scope.files);});//根据选择的图片来判断 是否为一下子选择了多张//一下子选择多张的数据格式为一个数组中有多个对象,而一次只选择一张的数据格式为一个数组中有一个对象$scope.selectImage = function (files) { if (!files || !files.length) { return; } if (files.length > 1) { angular.forEach(files, function (item) { var image = []; image.push(item); $scope.mulImages.push(image); }) } else { $scope.mulImages.push(files); }};$scope.upload = function () { if (!$scope.mulImages.length) { return; } var url = $scope.params.url; var data = angular.copy($scope.params.data || {}); data.file = $scope.mulImages; Upload.upload({ url: url, data: data }).success(function (data) { $scope.hide(data); $rootScope.alert('success'); }).error(function () { $rootScope.alert(‘error’); });};
联系客服