@ReactDev

Как использовать enctype="multipart/form-data" что бы он не мешал другим input?

Всем привет! Начал изучать Node.js все шло хорошо, но тут столкнулся с проблемой передачи файлов на сервер. Не могу понять как правильно это сделать в одном теге .

Я пытаюсь сохранить файлы в папке и передать на сервер данные с селектов и инпутов на сервер. Отдельно передать инпуты и селекты получается и отдельно файлы сохранить в папке получается,но все вместе не работает =(

Добрые люди помогите,пожалуйста

<!DOCTYPE html>
<html lang="en">
  <%- include('./partials/head.ejs')%>
<body>
  <%- include('./partials/nav.ejs')%>
  <div>
  <form id="contact-form" method="post" enctype="application/x-www-form-urlencoded">
    <div class="form-info">
      <label>Заголовок товара
        <input type="text" name="title">
      </label>
      <label>Автор
        <input type="text" name="author">
      </label>
    </div>
    <label> Категория: 
    <select name="selectсategory">
      <option >selectсategory1</option>
      <option >selectсategory2</option>
      <option >selectсategory3</option>
      <option >selectсategory4</option>
    </select>
  </label>
  <label> Наличие: 
    <select name="availability">
      <option >availability1</option>
      <option >availability2</option>
      <option >availability3</option>
    </select>
  </label>
  <div class="form_label">
    <span class="form_text">Размеры:</span>
    <div class="multiselect_block">
      <label for="select-1" class="field_multiselect">Размеры:</label>
      <input id="checkbox-1" class="multiselect_checkbox" type="checkbox">
      <label for="checkbox-1" class="multiselect_label"></label>
      <select id="select-1" class="field_select" name="size" multiple style="@media (min-width: 768px) { height: calc(4 * 38px)}">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
      </select>
    </div>
    <label> Выбор бренда
      <select name="brand">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
      </select>
    </label>
    <span class="error_text"></span>
</div>

    <div class="form-text">
      <label>Описание товара
        <textarea name="text"></textarea>
      </label>
    </div>
    <div>
      <span>Цена:</span> <input type="number" name="price" value="0.00">
      
    </div>
    <form id="contact-image-form" method="post" enctype="multipart/form-data">
      <div class="container ">
        <div class="row">
          <div class="col-md-12">
            <div class="uploadOuter">
            <span class="dragBox">
              <input type="file" 
              name="uploudInput"
              multiple 
              onChange="dragNdrop(event)"
              ondragover="drag()"
              ondrop="drop()" 
              id="uploadFile" 
              >
            </span>
            </div>
            <div id="preview"></div>
          </div>
        </div>
      </div>
      </form>
  </form>
 
    <div class="form-button">
      <input type="submit" value="Отправить" formaction="/add-post" onclick="submitForms()">
    </div>
  </div>
  <script src="/draganddrop.js"></script>
  <script src="/multiselector.js"></script>
  <script>
  submitForms = function(){
    document.getElementById("contact-form").submit();
    document.getElementById("contact-image-form").submit();
  }
  </script>
</body>
</html>
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега HTML
{PHP, MySql, HTML, JS, CSS} developer
ReactDev,
я пробывал разные варианты, пожалуйста, не судите строго
в истории вопросов вижу у вас вопросы по реакту и жс, и по этому слегка странно видеть такой гигантский провал в знаниях по банальной хтмл разметке...
В принципе все косяки я вам перечислил в первом комментарии. Яваскрипт убрать, форму (одну!, там не нужно 2 формы) привести в порядок, кнопку вернуть на законное место, прочитать про формы с файлом любой толковый онлайн ресурс для общего развития.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы