Пытаюсь реализовать функцию добавления картинки на сайт. Для этого был создан класс для картинки:
class Picture_post{
constructor(picture_id, picture_url, likes_count, dislikes_count){
this.picture_id = picture_id;
this.picture_url = picture_url;
this.likes_count = likes_count;
this.dislikes_count = dislikes_count;
}
}
На сайте уже присутствуют дефолтные блоки с картинками, для каждой картинки был созлан вручную объект, например let pic1 = new Picture_post("pic1","url('Img/pic1.png')","3","0");
создан массив var pictures_array = []
и каждый объект был запихнут в этот массив методом pictures_array.push(pic1);
.
Также была создана коллекция классов let image_block = document.getElementsByClassName("image-block");
. Суть в том, что скрипт считает количество блоков с картинками и запихивает их в коллекцию image-block
потом он каждому блоку присваивает значения из массива объектов pictures_array
На сайте присутствует форма для загрузки картинки:
<form id="adding-picture-form" method="post">
<button id="submit-picture-uploading-button" type="button" name="submit-picture-uploading-button"></button>
<label id="adding-picture-label" for="adding-picture-input">Add your Picture</label>
<input id="adding-picture-input" name="adding-picture-input" type="file" accept="image/*">
</form>
Сам input был скрыт от глаз юзера, а открытие диалогового (для загрузки картинки) окна происходит через клик на label. На данный момент на форме висят такие функции:
let adding_picture_label = document.getElementById("adding-picture-label");
let adding_picture_input = document.getElementById("adding-picture-input");
let submit_picture_uploading_button = document.getElementById("submit-picture-uploading-button");
adding_picture_input.addEventListener('change',()=>{
let picture = adding_picture_input.files[0];
if(picture){
adding_picture_label.innerHTML = picture.name;
return picture;
}
else{
adding_picture_label.innerHTML = 'Add your Picture';
return picture;
}
},false);
submit_picture_uploading_button.addEventListener('click', function () {
let picture = adding_picture_input.files[0];
if(picture){
console.log(picture);
}
else{
adding_picture_label.innerHTML = 'Upload picture first';
}
},false);
Мне бы хотелось, чтобы при клике на кнопку submit скрипт создавал новый объект картинки из моего класса, picture_url
присваивал значение adding_picture_input.files[0]
likes_count
и dislikes_count
было по нулям. Проблема в том, что я не знаю каким образом сделать создание нового объекта "универсальным". Что бы можно было прописать что-то типо let pic[pictures_array.length] = new Picture_post("pic"[pictures_array.length],"url('Img/adding_picture_input.files[0]')","0","0");
где место переменной pictures_array.length
прописывалась уже готовенькая циферка и на выходе получалось, к примеру let pic8 = new Picture_post("pic8","url('Img/pic8.png')","0","0");
и это добро сохранялось в массиве pictures_array
для дальнейшей работы.
Благодарю за любую помощь.