Как мне обновлять формы с загруженными файлами?

createArticle.html

<input type = "text" name=title>
<input type = "text" name=body>
...

<div id = "file1" onclick = "clickInput1();"> Click here to upload 1 </div>
<div id = "file1" onclick = "clickInput2();"> Click here to upload 2 </div>
<div id = "file1" onclick = "clickInput3();"> Click here to upload 3 </div>

...

<input type = "file" name = "files0[]" id = "input1"  onchange = "createPreview(...)" hidden>
<input type = "file" name = "files0[]" id = "input2"  onchange = "createPreview(...)" hidden>
<input type = "file" name = "files0[]" id = "input3"  onchange = "createPreview(...)" hidden>

...

<img id = "previewFile1">
<img id = "previewFile2">
<img id = "previewFile3">

<button type = "submit">Submit</button>

Я пытаюсь сделать страницу статьи с тремя загруженными изображениями. Однако у меня возникают проблемы при обновлении / удалении загруженных файлов. Пути загруженных файлов хранятся в БД в виде строкового формата JSON, который будет выглядеть примерно так:

files0:['/tmp/a.png','/tmp/b.png',''] // if it has two files.

При обновлении мой контроллер (php) вызовет создание нового массива (например, $ filePathArr [] длиной 3) и вставит путь к файлу изображения из $ _FILES. Если в $ _FILES есть пустое значение, он будет искать предыдущие пути к файлам из базы данных и вставлять в $ filePathArr [].

uploadArticle.php

Пример $ _FILES

array(3) {
  ["files0"]=>
  array(5) {
    ["name"]=>
    array(3) {
      [0]=>
      string(20) "a.png"
      [1]=>
      string(20) "b.png"
      [2]=>
      string(0) "" 
    }
   ...
  }
}

Хотя я могу загружать и обновлять новые изображения, я понял, что не могу удалить существующее изображение, поскольку пустые значения будут заменены существующими значениями. Хотя я не хочу, чтобы пустые изображения просто перезаписывали существующие изображения, я также должен иметь возможность удалять изображения.

Каков был бы простой способ свободно редактировать загруженные изображения, сохраняя старые изображения до тех пор, пока они не будут перезаписаны / удалены пользователем?

В настоящее время я использую mysql и php без каких-либо фреймворков.

Непонятно, почему нельзя сравнивать с тем, что уже есть в БД

charlietfl 31.03.2021 06:38

@charlietfl Я могу, когда контроллер находит пустой слот в $ _FILES, он заполняется предыдущим значением в db. Проблема в том, что, поскольку пустые значения заменяются предыдущими значениями, как я могу удалить предыдущее значение? Как мне сообщить контроллеру, следует ли удалить существующее изображение или использовать предыдущее изображение db при пустом значении?

viviet 31.03.2021 06:55
$_FILES - системная переменная, содержащая список загруженных файлов, если таковые имеются. Почему ты что-то туда кладет?
Tangentially Perpendicular 31.03.2021 07:23

@TangentialPerpendicular О, моя беда, он сначала читает из $ _FILES и создает из него новый массив, содержащий только пути к файлам. Извини, что пропустил.

viviet 31.03.2021 08:16

Ваша проблема в том, что «пустое» значение для этих полей не позволяет вам провести необходимое различие между двумя разными сценариями. Таким образом, вам либо нужно ввести дополнительный параметр, который помогает с этим (например, один флажок для каждого поля ввода файла, возможно, скрытый от просмотра, который вы проверяете через JS, если поле не осталось пустым); или предотвратить добавление параметра в набор данных отправки формы из-за пустого поля - отключив поля ввода пустого файла перед отправкой.

CBroe 31.03.2021 09:31

Во втором случае вы захотите изменить схему именования на name = "files0[0]" и т. д. (Указав индекс заранее), иначе вы не сможете сообщить который о том, что поля не были отправлены. И ваша серверная логика, которая объединяет это с массивом существующих файлов, должна будет учитывать этот индекс, соответственно. что результирующий массив $ _FILES будет иметь «дыры» в индексе.

CBroe 31.03.2021 09:32

@CBroe Спасибо, помните о флажках, но я надеюсь, что для этого будет несколько более элегантное решение ...

viviet 31.03.2021 10:36
Поведение ключевого слова "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) для оценки ваших знаний,...
1
7
48
0

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