ng-file-upload實現圖片上傳
阿新 • • 發佈:2018-12-11
通過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;
}
實現效果
注:此為個人筆記及總結,有誤或有更好的解決方案請指正!謝謝