Я пытаюсь создать форму с несколькими галереями изображений, которая включает до пяти изображений, похожих на эту (http://prntscr.com/mcl2ay)! [Галерея изображений] [1], как я могу создать галерею изображений, как это, и чтобы иметь возможностьзаменить / удалить каждое изображение угловым js? спасибо за вашу помощь. Это код, который у меня есть до сих пор .. https://jsfiddle.net/eladnm/gzvh8cbm/1/
Я ожидаю, что смогу загрузить 5 изображений, как показано с изображениями ивозможность редактировать каждый - заменить / удалить
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);
});
};
$scope.uploadedFile = function(element) {
if(element.files[0].type === "image/jpeg" || element.files[0].type=== "image/gif" || element.files[0].type ==="image/png"){
if(element.files[0].size<10485760){
if(element.files.length < 5){
$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]);
}
else{
alert("too many files")
}
}
else{
alert("File too Large")
}
}
else{
alert("Not An Image")
}
}
});
<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>