Измените тип ввода = "файл", чтобы получить значение из массива

Прежде чем вводить изображения в базу данных, я использовал js для отображения изображений пользователя до того, как они были добавлены в базу данных, что мне удалось сделать. Но я также хочу добавить функцию, которая может удалять определенные изображения.

У меня есть тип ввода = «файл», откуда я вставляю данные с ПК.

<div class = "form-group">
<input class = "form__upload" 
  name = "images" 
  id = "creative---Point19981022--newPostPhoto" 
  type = "file" multiple = "" accept = "image/*">
<label for = "creative---Point19981022--newPostPhoto">Choose photo</label>
</div>

Чтобы добавить функциональность очистки, мы сохранили входные данные в массиве объектов, я создал новый массив, в котором я храню данные, которые хочу удалить, а затем использую array.filter для разделения информации.

$this.data('delimg'); -> <div class = "delete_image_output" data-delimg = "0">x</div>

let prepareArrayList = new Array();

  $(document).on('click','.delete_image_output',function(){
  //Get Image From Fill
  let filesArr = document.getElementById('creative---Point19981022--newPostPhoto').files;
  let arrayImg = [...filesArr];
  //Delegation which get data-delimg value
  let $this = $(this);
  let renderOutpudId = $this.data('delimg');
  //get value started from data-delimg value
  const delElelemnt = arrayImg[renderOutpudId];
  //push deleted value in a new array which will by use to make a filter
   prepareArrayList.push(delElelemnt)

   //Make a filter with value coming from array with deleted element
   arrayImg = arrayImg.filter(f => !prepareArrayList.includes(f));

    //at the end arrayImg will has the remaining values
    console.info(arrayImg)

});

В конце концов мне удается получить массив с выбранными изображениями, но есть проблема с сохранением информации в базе данных.

Но как изменить код в структуре ниже, чтобы вместо значения из ввода брать значение из массива выше?

let createPost = document.querySelector('.createNew--post--creativePoint');
if (createPost){
createPost.addEventListener('submit',(crPos)=>{
    crPos.preventDefault();

    let filesImg = document.getElementById('creative---Point19981022--newPostPhoto').files;
    const postData = new FormData();
        postData.append('title',document.getElementById('creative---Point19981022-create--newPostTitle').value);
        postData.append('link',document.getElementById('creative---Point19981022-create--newPostLink').value);
        postData.append('description',document.getElementById('creative---Point19981022--newPostDescription').value);
        postData.append('datePost',document.getElementById('creative---Point19981022--dataNow').value);
        // Using For loop for miltiple images
        for (let p = 0; p < filesImg.length; p++) {
            postData.append('images', filesImg[p]);
        }
        postData.append('youtubeEmbedVideo',document.getElementById('creative---Point199810022-create-embedIdOnly').value);
        postData.append('author',document.getElementById('creative---Point19981022--authorDate').value);
    
    // Do not allow posts if all fields al empty
    if ( document.getElementById('creative---Point19981022-create--newPostTitle').value != "" || 
        document.getElementById('creative---Point19981022--newPostPhoto').files.length != 0  || 
        document.getElementById('creative---Point19981022-create--newPostLink').value  != "" ||
        document.getElementById('creative---Point19981022--newPostDescription').value  != "" ||
        document.getElementById('creative---Point199810022-create-embedIdOnly').value  != ""){
            //createPostFnc(postData);
            console.info(filesImg)
    }else{
        showAlert('error',' No field was filled in, the post cannot be processed');
    }    
});

filesImg вместо входного значения взять значение из массива и настроить структуру

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
273
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, если я правильно понимаю, вы хотите отправить отфильтрованный массив файлов вместо всех файлов, которые были выбраны input.

Я бы попробовал использовать тернарный оператор на filesImg, чтобы проверить, пуст ли «отфильтрованный массив» или нет. Потому что, возможно, пользователь ничего не удалял...

let filesImg = (arrayImg.length>0) ? arrayImg : document.getElementById('creative---Point19981022--newPostPhoto').files;

Вы должны объявить arrayImg в глобальной области видимости, как вы это сделали для prepareArrayList.

Другие вопросы по теме