angular_上传图片、预览图片

大致思路：

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

            })

            };

        };