大致思路:
写了个fileModel指令,用于选择文件时触发,指令中调用控制器方法进行图形回显处理。
伪代码:
jsp:
<div class="form-group">
<label class="col-md-4 control-label">系统图标</label>
<div class="col-md-4">
<input type="file" file-model="myFile"/>
<img data-ng-src="{{updateSysinfo.sysIcon}}" />
</div>
</div>
js: 指令:
.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs, ngModel) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(event){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
//附件预览
scope.file = (event.srcElement || event.target).files[0];
scope.getFile(element[0].files);//注意: getFile()是控制器中的方法,通过指令调用的。
});
}
};
}]);
控制器:
var SysInfoController = ["$scope",'$state','Messages','$modal','UrlManager', //
'SysInfoService','HttpService', 'PlatformService',//
function($scope,$state,messages,$modal,urlManager,//
sysInfoService,httpService, platformService) {
//通过指令调用 $scope.getFile方法
$scope.getFile = function (files) {
$scope.reader = new FileReader();
$scope.reader.readAsDataURL(files[0]); //FileReader的方法,把图片转成base64
$scope.reader.onload = function(ev) {
$scope.$apply(function(){
$scope.updateSysinfo.sysIcon=ev.target.result //接收base64
})
};
};
相关推荐
js上传图片预览图片.pdf
js 图片上传 并预览图片
input file上传图片预览
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型...
在JSP上传图片前预览图片在JSP上传图片前预览图片
实现上传图片预览的方式,共三种方法,各自的作用和效果不同,有需要的朋友可以看看
C#上传图片预览,aspx,winform,都有。。
.net上传图片之前预览 并上传到服务器
JS+asp.net+图片上传+预览+支持多上传+上传前预览
实用JS,jQuery实现上传图片的预览功能,可以跟随鼠标移动
java实现图片上传预览,包含asp和jsp的实现代码,以及相关说明
html5图片上传插件预览图片尺寸大小上传代码html5图片上传插件预览图片尺寸大小上传代码
php上传图片并预览图片源码包含html静态页和php源码类页面
angularjs实现上传图片并且预览
JAVA 图片上传 预览 实现代码
diyUpload JAVA版,支持多文件,多图片先预览后上传,JAVA 项目文件部署即可使用
很方便的js实现图片上传马上预览的效果~~~
上传图片预览 图片压缩 按尺寸图片裁剪 打水印 设置在JD_Sys_Conventional表中 JD_ImgDefinition 清晰度 JD_WaterFont 水印字体 JD_ImgRule 生成规则 (三种选择,1是HW,指定高宽缩放(可能变形)2是W,...
图片上传本地预览插件
用于winform的图片上传下载,带图片预览,源码项目