ng-file-upload实现图片上传

通过ng-file-upload这个轻量级、跨浏览器的angular上传文件指令实现图片上传，本文对图片大小有限制，同时附有图片删除功能。

HTML

<div class="form-group marginB15 no-padding">
    <label class="col-xs-1 defined-control-label2">上传图片<span>*</span></label>
    <div class="col-xs-10 marginT10">
        <div class="text-font12 marginB5">支持最多上传4张XX图片</div>
        <div class="col-xs-2 no-left-padding direct-width" ng-repeat="newsFile in liveNewsFiles">
            <div class="direct-img">
                <img ng-src="{{USPAD_USER_DATA_PATH+newsFile.path+newsFile.fileName}}"/>
                <div ng-click="deleteImg(newsFile)">
                    <div class="direct-circle"></div>
                    <div class="direct-delete">X</div>
                </div>
            </div>
        </div>
        <div class="col-xs-2 no-left-padding direct-width" ng-show="addFile">
            <div class="direct-block overflow" ngf-select="upload($file,'liveNews')"
                 ngf-accept="'image/*'"  ngf-pattern="'image/*'" ng-model="attchFile">
                <p class="marginT30"><i class="glyphicon glyphicon-plus text-font18"></i></p>
            </div>
        </div>
    </div>
</div>

JS

//首条XX图片
$scope.liveNewsFiles = [];
$scope.directInfo = {};

 /**立即删除单张图片，并从数组中删去*/
$scope.deleteImg = function (file) {
    if(checkNull(file.id)){
        $rootScope.openModal("sm",'删除图片失败',false);
        return;
    }
    //删除图片 后台请求
    typhoonDirectService.deleteFile({id:file.id},function (responseData) {
        if(responseData.status == '00'){
            $scope.liveNewsFiles.splice($.inArray(file, $scope.liveNewsFiles), 1);
            $scope.checkLiveNewsImg();
        }
    })
}
/**根据id批量删除图片数据*/
$scope.deleteFile = function(idsArray){
    if(checkNotNull(idsArray) && idsArray.length>0){
        //批量删除图片 后台请求
        typhoonDirectService.deleteFile({id:idsArray},function (responseData) {
            console.log("删除图片结果"+responseData.status);
        })
    }
}

/**查看首条XX图片已上传长度，未满4张则显示可上传按钮，满了则屏蔽*/
$scope.addFile = true;//可以上传
$scope.checkLiveNewsImg = function(){
//            console.log("$scope.liveNewsFiles.length=="+$scope.liveNewsFiles.length);
    if($scope.liveNewsFiles.length<4){
        $scope.addFile = true;//可以上传
    }else{
        $scope.addFile = false;//不可以上传
    }
}
/**循环首条XX图片，保存图片ID*/
$scope.getFirstLiveNewsImg = function(){
    var newsId = new Array();
    if($scope.liveNewsFiles!=null && $scope.liveNewsFiles.length>0){
        for(var i=0; i<$scope.liveNewsFiles.length; i++){
            newsId.push($scope.liveNewsFiles[i].id);
        }
    }
    return newsId;
}

/**图片上传*/
$scope.upload =  function (file,mark) {
    if(checkNull(file)){
        return;
    }
    if(file.size>1024*1024){
        $rootScope.openModal("sm",'图片大于1MB,请调整图片至小于等于1MB',false);
        if(mark=="liveNews"){
            $scope.attchFile = "";
        }
        return;
    }
    fake(0);
    Upload.upload({
        url: ctx+'/file/upload',
        data: {file: file, 'mark': mark}
    }).then(function (resp) {
        fake(1);
        if(resp.data.status == '00'){
            if(mark=="liveNews"){
                $scope.liveNewsFiles.push(resp.data.data);
                $scope.checkLiveNewsImg();
            }
        }else{
            $rootScope.openModal("sm",'图片上传失败',false);
        }
        $scope.attchFile = "";//不管上传是否成功都清空
    }, function (resp) {
        fake(1);
    }, function (evt) {
        fake(1);
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
    });
}

注意点：

1.在整个新建页面保存并提交时做如下处理

//获取首条直播图片id集合

$scope.directInfo.firstLiveNewsImg = $scope.getFirstLiveNewsImg();

2.在整个新建页面取消时做如下处理

//取消时，先删除新增的图片，再跳转至相应页面
var deleteIds = $scope.getFirstLiveNewsImg();
$scope.deleteFile(deleteIds);

3.点击+框，选择文件上传的同时执行$scope.upload方法，其同步传至后台，返回图片结果至$scope.liveNewsFiles集合，前端显示相应的图片路径即可。

4.对于图片大小限制未使用ngf-max-size="1MB"，主要是因为ngf-max-size的效果是：图片大于1MB则直接上传不了，无提示。

CSS

.direct-width{
    width: 129px;
}
.direct-delete{
    left: 101px;
}
.direct-circle{
    left: 96px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #276399;
}
.direct-img{
    position: relative;
    padding: 2px 0;
    height: 94px;
    text-align: center;
    border: 5px solid #D0CDC7;
    color: #276399;
}
.direct-img img{
    width: 100px;
    height: 80px;
}
.direct-img div{
    position: absolute;
    top: -6px;
}
.direct-block{
    height: 92px;
    text-align: center;
    cursor: pointer;
    border: 2px dashed #999;
}

实现效果

注：此为个人笔记及总结，有误或有更好的解决方案请指正！谢谢