上传图片、预览图片

大致思路:

写了个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

            })

            };

        };

猜你喜欢

转载自yingyingsheji.iteye.com/blog/2356261