1. 程式人生 > >angularJS上傳圖片預覽

angularJS上傳圖片預覽

MetronicApp.directive('uploadImg',['$rootScope','$parse',function ($rootScope,$parse) {
    return {
        restrict:'A',
        link:function (scope,element, attrs, ngModel) {
            element.bind('change', function(event){
                //附件預覽
                scope.file = (event.srcElement || event.target).files[0];
                //controllerJS中獲取
                scope.getFile();
            });
        }
    }
}]);
MetronicApp.factory('fileReader', ["$q", "$log", function($q, $log){
        var onLoad = function(reader, deferred, scope) {
            return function () {
                scope.$apply(function () {
                    deferred.resolve(reader.result);
                });
            };
        };

        var onError = function (reader, deferred, scope) {
            return function () {
                scope.$apply(function () {
                    deferred.reject(reader.result);
                });
            };
        };

        var getReader = function(deferred, scope) {
            var reader = new FileReader();
            reader.onload = onLoad(reader, deferred, scope);
            reader.onerror = onError(reader, deferred, scope);
            return reader;
        };

        var readAsDataURL = function (file, scope) {
            var deferred = $q.defer();
            var reader = getReader(deferred, scope);
            reader.readAsDataURL(file);
            return deferred.promise;
        };

        return {
            readAsDataUrl: readAsDataURL
        };
    }]);

在controllerJS中注入“fileReader”

$scope.imgUrlList = [];
        $scope.getFile = function(){
            fileReader.readAsDataUrl($scope.file, $scope)
                .then(function(result) {
                    $scope.imgUrlList.push(result);
                });
        };
頁面上預覽
<div class="row">
                        <input type="file" upload-img >
                        <div class="col-md-12" ng-repeat="item in imgUrlList">
                            <img ng-src="{{item}}" style="max-width:100px;max-height:100px;margin:0 auto;display:block;" />
                        </div>
                    </div>