angularJS上傳圖片預覽
阿新 • • 發佈:2019-01-06
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>