html 中代码:
<input type="file" file-Model="myFile" />
<div class="col-md-12">
<img ng-src="{{imageSrc}}" style="width:300px;height:300px;" />
</div>
controller中代码:
$scope.getFile = function (aaaa,bbbbb) {
console.log("--------------");
console.log($scope.file);
console.log(aaaa);
fileReader.readAsDataUrl(aaaa, bbbbb)
.then(function(result) {
console.log(result);
$scope.imageSrc = result;
console.log( $scope.imageSrc);
});
};
directive 中的代码
.directive('fileModel', ['$parse','fileReader', function ($parse,fileReader) {
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];
console.log( scope.file);
scope.getFile(scope.file, scope);
//fileReader.readAsDataUrl(scope.file, scope)
// .then(function(result) {
// scope.imageSrc = result;
// });
});
},
//controller:function($scope){
// $
//}
};
}])
factory 中的代码:
.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
};
}])