<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>

image-upload.html:
//显示选择的图片
<img ngf-src="data.file || data.defaultImage" class="img-responsive"/>
<div class="button" ngf-select="" ngf-pattern="'image/*'" ngf-multiple="false" ng-model="data.file">
选择文件
</div>
<button ng-click="upload()">upload</button>
 
image-upload-ctrl.js:
 $scope.data = {
    file: null
};
$scope.upload = function () {
    if (!$scope.data.file) {
        return;
    }

    var url = $scope.params.url;  //params是model传的参数，图片上传接口的url
    var data = angular.copy($scope.params.data || {}); // 接口需要的额外参数，比如指定所上传的图片属于哪个用户: { UserId: 78 }
    data.file = $scope.data.file;

    Upload.upload({
        url: url,
        data: data
    }).success(function (data) {
        $scope.hide(data);
    }).error(function () {
        logger.log('error');
    });
};

 <div class="button" ngf-select ngf-pattern="'image/*'" ng-model="files" ngf-multiple="true">选择多张图片</div>
 
//ngf-multiple控制是否可以上传多张图片
 
    // for multiple files:
    $scope.upload = function (files) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }
        // or send them all together for HTML5 browsers:
        Upload.upload({..., data: {file: files}, ...})...;
      }
    }

image-upload.html:
<button class="btn btn-default" ngf-select="" ngf-pattern="'image/*'" ng-model="data.file"
        ngf-multiple="false">
    选择图片
</button>
<span>(支持拖拽单张图片上传)</span>
 
<div ngf-drop ngf-pattern="'image/*'" ng-model="data.file" class="cropArea">
    <img-crop image="data.file|| data.defaultImage" resule-image="data.file"></img-crop>

    <div class="col col-sm-4 text-left">
        <img ngf-src="data.file|| data.defaultImage"
            />
    </div>
</div>
 
<button class="btn btn-primary" ng-click="upload()">开始上传</button>
 
style.css:
.cropArea {
    background: #E4E4E4;
    min-height: 230px;
    height: auto;
    margin: 15px;
    margin-right: 0;
}

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" 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" ng-repeat="image in mulImages">
        <div ng-repeat="oneImage in image">
            <img ngf-src="oneImage || data.defaultImage" class="img-responsive" 
                />
        </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’);
    });

};