Я использую Angular 5. У меня есть требование, где мне нужно загрузить изображение на страницу и отобразить изображение?
Есть ли какой-либо тег Angular 5 или html-тег, который я могу сделать?
Я прилагаю скриншот, как он выглядит.Пользователь нажимает кнопку «Загрузить», и должно появиться всплывающее окно, где пользователь выбирает файл для загрузки.После того, как они выбирают файл для загрузки и нажимают кнопку открытия.Изображение появится на странице?
<title>Angularjs Image Uploading</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
</head>
<body ng-app="main-App" ng-controller="AdminController">
<!-- Form Start -->
<form ng-submit="submit()" name="form" role="form">
<input ng-model="form.image" type="file" class="form-control input-lg" accept="image/*" onchange="angular.element(this).scope().uploadedFile(this)" style="width:400px">
<input type="submit" id="submit" value="Submit" />
<br/>
<img ng-src="{{image_source}}" style="width:300px;">
</form>
<!-- Form End -->
<script type="text/javascript">
var app = angular.module('main-App', []);
app.controller('AdminController', function($scope, $http) {
$scope.form = [];
$scope.files = [];
$scope.submit = function() {
$scope.form.image = $scope.files[0];
$http({
method: 'POST',
url: 'upload.php',
processData: false,
transformRequest: function(data) {
var formData = new FormData();
formData.append("image", $scope.form.image);
return formData;
},
data: $scope.form,
headers: {
'Content-Type': undefined
}
}).success(function(data) {
alert(data);
}).error(function(e) {
alert(e);
});
};
$scope.uploadedFile = function(element) {
$scope.currentFile = element.files[0];
var reader = new FileReader();
reader.onload = function(event) {
$scope.image_source = event.target.result
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}
reader.readAsDataURL(element.files[0]);
}
});
</script>