0
我有一个数组添加图像,我看到图像显示在缩略图下面,当我添加图像时,我想从数组中删除选定的图像。从阵列中删除图像
我有一个名为删除图像功能,我试图让一些工作,但我需要在阵列中选择任何图像,并删除(如X旁边的图像)
HTML
<img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
<label for="file">Select File</label>
<input ng-model="file" type='file' ng-model-instant name='file' id='fileinput' accept='image/*' onchange='angular.element(this).scope().uploadImage(this)' /> {{uploadError}}
<button ng-click="addImage()">Add image</button>
<div ng-repeat="slot in slots">
<img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="preview image">
</div>
的JavaScript
$scope.preview = 'img/download.png';
$scope.slots = [];
$scope.maxSlots = 5; // this dynamic
$scope.uploadImage = function() {
// console.log('we are here');
input = document.getElementById('fileinput');
file = input.files[0];
size = file.size;
if (size < 650000) {
var fr = new FileReader;
fr.onload = function (e) {
var img = new Image;
img.onload = function() {
var width = img.width;
var height = img.height;
if (width == 1920 && height == 1080) {
// console.log(e.target.result);
$scope.preview = e.target.result;
$scope.perfect = "you added a image";
// window.alert("perfect");
$scope.$apply();
} else {
$scope.notPerfect = "incorrect definitions";
// console.log(width, height);
$scope.$apply();
}
};
img.src = fr.result;
};
fr.readAsDataURL(file);
} else {
// window.alert("to big");
$scope.notPerfect = "to big";
// console.log('file size to big')
}
};
$scope.addImage = function() {
if ($scope.slots.length < $scope.maxSlots) {
$scope.slots.push({
"slot_id": $scope.slots.length + 1,
"base_image": $scope.preview,
"path_image": ""
});
} else {
window.alert("you have to delete a slot to generate a new one");
// console.log('you have to delete a slot to generate a new one')
}
};
$scope.removeImage = function() {
if ($scope.slots.length < $scope.maxSlots) {
$scope.slots.push({
"slot_id": $scope.slots.length - 1,
"base_image": $scope.preview,
"path_image": ""
});
} else {
window.alert("you have to delete a slot to generate a new one");
// console.log('you have to delete a slot to generate a new one')
}
};
'<按钮纳克单击= “removeImage(时隙)”>','$ scope.removeImage =函数(S){$ scope.slots。拼接($ scope.slots.indexOf(s),1); };'。类似的东西。你应该通过图片的参考去除,以便你可以在你的收藏中轻松检测到它。检查数组拼接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice – briosheje
@briosheje谢谢,我试试这个 – Beep
作品完美谢谢兄弟! – Beep