前端之家收集整理的这篇文章主要介绍了
Angularjs上传图片实例详解,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
•上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示:
•在相应的html中引入文件路径:
•如何使用呢?在html文件中使用 ngf-select
更改头像
上传单个
文件
function uploadFiles(file,errFiles) {
vm.imgInfo = file;
console.log(file);
if (file) {
vm.img = file.name;//测试使用
//Service.upload('','',{file:file})//开发使用
}
}
文件
上传预设配置
Upload.setDefaults({
ngfAccept: "'.jpg,.png,.gif,.jpeg'",ngfDropDisabled: 'true',ngfPattern: '.jpg,.jpeg',ngfMaxSize: '2MB'
});
//
上传文件
function upload(ctrl,name,param) {
var deferred = $q.defer(),interfaceName = ctrl + '/' + name,backendDetail = getBackendDetail(interfaceName);
//
上传文件到服务器
Upload.upload({
url: backend.url + ':' + backendDetail.port + '/' + backendDetail.service + '/' + interfaceName,data: param || {}
}).then(function(data) {
//service返回数据
var result = data.data;
//200代表接口
调用成功
if (data.status === 200) {
//
数据库返回
错误信息
if (result && serviceErrors[result.returnCode]) {
deferred.reject('Error Services');
swal(result.message,'
错误状态码:' + result.returnCode,'error');
} else if (!result.dataInfo) {
deferred.reject('Error Image');
swal('
图片上传失败','请检查
图片属性','error');
} else {
deferred.resolve(result);
}
} else {
deferred.reject('Error Services');
swal('提交操作失败','
错误状态码:' + data.status,'error');
}
},function(error) {
deferred.reject('Error Services');
swal('提交操作失败','
错误状态码:' + error.status,'error');
});
return deferred.promise;
}