我正在尝试创建一个包含多个图像库的表单,其中最多包含五个与此图像相似的图像(http://prntscr.com/mcl2ay) ![图片库] [1] 我如何创建像这样的图像库,并能够用angular 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>