通過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;
}
實現效果
注:此爲個人筆記及總結,有誤或有更好的解決方案請指正!謝謝