Загрузка файлов с предварительным просмотром изображений и удаление ссылки с помощью Array и readAsDataURL

Question

Я получил свой код, работающий с ванильным JavaScript, однако я новичок в JS, поэтому я не знаю, надежен ли код или нет. Любые советы по улучшению кода приветствуются.

Примечание: Я только что заметил ошибку. Код удаляет изображение из DOM (это правильный термин?), Но по-прежнему отправляет изображения, которые я удалил. Есть идеи, как это исправить?

 let count = 0

 function previewFiles(input) {
   const preview = document.getElementById('preview')
   const {
     files
   } = input

   Array.from(files).forEach(file => {
     const reader = new FileReader()

     reader.onload = e => {
       const div = document.createElement('div')
       const img = document.createElement('img')
       const button = document.createElement('button')

       img.src = e.target.result
       img.width = 200
       img.height = 200
       img.alt = `file-${++count}`

       button.textContent = "Delete"
       button.addEventListener('click', () => {
         preview.removeChild(div)
       })

       div.appendChild(img)
       div.appendChild(button)

       preview.appendChild(div)
     }

     reader.readAsDataURL(file)
   })
 }

    <input type="file" multiple onchange="previewFiles(this);" />
    <div id="preview"></div>

0

Похожие записи:

Добавить комментарий Отменить ответ