1、先布置好前端界面的代码
JavaScript代码:
关于fBootstrap fileinput的使用可以参考:
a、http://blog.csdn.net/qing_gee/article/details/48949701
b、http://blog.csdn.net/lvshaorong/article/details/48730145(中文翻译文档)
最终的前端界面效果:
本博文纯属作为笔记。
HTML代码:
<div class="t-infoFloor">fileinput
<span>* 上传图片:</span><input id="inputPic" type="file" class="file" data-preview-file-type="text"/>
<span>图片后缀名必须为png、jpg、gif,文件小于2M</span>
</div>
JavaScript代码:
$("#inputPic").fileinput({
language: 'zh', //设置语言
allowedPreviewTypes : [ 'image' ],//文件类型
allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
showUpload: false, //是否显示上传按钮
maxFileSize : 2000//上传文件大小
}).on("filebatchselected", function(event, files) {
$scope.userPic = files; //当选择图片后,把图片的属性及其他信息赋予$scope.userPic
});
关于fBootstrap fileinput的使用可以参考:
a、http://blog.csdn.net/qing_gee/article/details/48949701
b、http://blog.csdn.net/lvshaorong/article/details/48730145(中文翻译文档)
可以根据需要,对控件的显示颜色进行调整
CSS代码
.file-input .btn-primary,.file-input .fileinput-remove{
background: transparent;
color: #8d78d7;
border: 1px solid #8d78d7; /*对显示的上传图标的颜色设置*/
}
.file-input .btn-primary:hover,.file-input .fileinput-remove:hover{
background: #fff;
}
.krajee-default.file-preview-frame:not(.file-preview-error):hover{
box-shadow: 3px 3px 5px 0 #e9e8e8;
}
.file-error-message{ /*若上传出错,显示的错误信息的颜色以及文字的样式设置*/
color: #8d78d7;
background-color: #e4f5e4;
border: 1px solid #8d78d7;
}
最终的前端界面效果:
2、上传图片的JS代码(Angular部分)
$http({
method: 'POST',
url : $scope.saveBasicInfoUrl,
headers: {
'Content-Type': undefined
},
data: {
pic:$scope.userPic,
data:$scope.teaInfo
},
transformRequest: function(data, headersGetter){ // 转换为文件流
var formData = new FormData();//声明一个FormData对象
//document.getElementById("inputPic").files[0]为图片上传控件input的files对象
formData.append('userPic',document.getElementById("inputPic").files[0]);
//下面两句代码跟上传图片无关,是我所做项目要提交给服务器的数据
angular.forEach(data.data, function (value, key) { // append数据
formData.append(key, value);
});
return formData;
}
}).then(function(response){
if(response.data.status){
$scope.alertBoxShowHide("保存成功!");
}else{
$scope.alertBoxShowHide(response.data.msg);
console.log(response.data.message);
}
});
本博文纯属作为笔记。