大致思路:
写了个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
})
};
};