Показывать следующий file_input после первого выбора значения - PullRequest
Новая
       93

Показывать следующий file_input после первого выбора значения

0 голосов
/ 27 января 2020

Я пытаюсь создать форму с возможностью загрузки одного или двух изображений внизу формы.

Пока форма html работает нормально и выглядит так;

HTML

<form action="new.php" enctype="multipart/form-data" method="post">
    Affected Service<br><input type="text" name="affected" style="width:40vw;"><br><br>
    Summary<br><input type="text" name="title" style="width:40vw;"><br><br>
    Description<br><textarea name="description" style="width:40vw;" rows="8"></textarea><br><br>
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    Choose a file to upload (max 2 - jpg or png only):<br>
    <input id="uploaded_file" name="uploaded_file" type="file" onchange="file2Function()" /><br>
    <input id="uploaded_file2" name="uploaded_file2" type="file" /><br>
    <button type="submit">Submit</button></form>

Теперь, чтобы выглядело немного лучше, я хотел, чтобы вход 2-го файла показывался только тогда, когда у 1-го значения есть значение (т.е. пользователь выбрал файл). Поэтому я собрал ниже javascript, который работает в принципе. Однако на самом деле он не делает то, что мне нужно, потому что второе поле ввода файла отображается по умолчанию при первой загрузке страницы, что делает его устаревшим. Если я установлю css для "uploaded_file2" в "display: none;" затем он скрывает его, но в свою очередь javascript не может отобразить его.

JS

      <script>
var file = document.getElementById("uploaded_file");
var target = document.getElementById("uploaded_file2");

function file2Function() {
  if(file.files.length > 0 ) {
    target.style.display = "block";
  } else {
    target.style.display = "none";
  }
}
</script>

CSS

          #uploaded_file2{
    display:none;
          }

Кроме того, пока мы здесь ... если я хочу сделать это 5 файлов, а не только 2. Есть ли более простой способ использовать одну функцию javascript или я буду создание 4х функций? В идеале я хочу расширить его до 5 файлов, если я могу сделать это более простым способом!

Спасибо всем ..

...