通过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;
}
实现效果
注:此为个人笔记及总结,有误或有更好的解决方案请指正!谢谢