Манипулирование formData в HTML не работает так, как задумано - PullRequest
Новая
       50

Манипулирование formData в HTML не работает так, как задумано

0 голосов
/ 04 ноября 2019

Итак, я сейчас работаю над сложным проектом для веб-сервера, где я сейчас выполняю загрузку файлов. Серверная часть этого веб-сервера написана на Rust, и она уже работает нормально. Для самой загрузки файла бэкэнд Rust извлекает всю необходимую информацию, такую ​​как сам файл, и некоторые дополнительные параметры формируют поле content-disposition-field.

Это выглядит так: 

fn get_parameters(field: &Field) -> Option<(String, String, String)> {
    let content = field.content_disposition()?;
    let file_name = content.get_filename()?.to_owned();
    let file_kind = content.get_unknown("file-kind")?.to_owned();
    let node_id = content.get_unknown("node-id")?.to_owned();

    Some((file_name, file_kind, node_id))
}

В этомВ этом случае мы получаем file_name для самого файла и две дополнительные переменные, которые я использую для записи в базу данных (file_kind и node_id).

Теперь для внешнего интерфейса я использую простой HTML-Страница, в первую очередь, здесь: 

<!DOCTYPE html>
<html>
  <head>
    <title>Geohub - Upload</title>
    <link href ="css/bootstrap-geohub.css" rel="stylesheet" type="text/css">
    <link href="css/upload.css" rel="stylesheet">
  </head>
  <body class="text-center">
    <form class="form-upload" target="/storage" action="/storage" method="post" accept-charset="utf-8" enctype="multipart/form-data" name="fileinfo">
      <script>
        var form = document.forms.namedItem("fileinfo");
        form.addEventListener('submit', function(ev) {
            var formData = new FormData(form);
            formData.append('file-kind', document.getElementById('inputFileKind').value);
            formData.append('node-id', document.getElementById('inputNodes').value);

            console.log(formData.getAll('node-id'));
            console.log(formData.getAll('file-kind'));            
        }, false);
      </script>
      <div class="form-label-group">
         <input type="file" id="file" name="file" multiple>            
      </div>
      <div class="form-label-group">
          <input id="inputNodes" class="form-control form-textbox-path" placeholder="Nodes" required="" data-cip-id="inputNodes" type="text" name="nodes">
          <label for="inputNodes" class="inline-upload-label">Nodes</label>              
      </div>
      <div class="form-label-group">
          <input id="inputFileKind" class="form-control form-textbox-path" placeholder="File-Kind" required="" data-cip-id="inputFileKind" type="text" name="filekind">
          <label for="inputFileKind" class="inline-upload-label">File-Kind</label>              
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Upload</button>
    </form>
  </body>
</html>

Итак, как вы можете видеть, я использую текстовые поля, где пользователь выбирает файл и помещает информацию для полей file_kind и node-id в текстовое поле:

<input id="inputNodes" class="form-control form-textbox-path" placeholder="Nodes" required="" autofocus="" data-cip-id="inputNodes" type="text" name="nodes">
<input id="inputFileKind" class="form-control form-textbox-path" placeholder="File-Kind" required="" autofocus="" data-cip-id="inputFileKind" type="text" name="filekind">

Информация о файле поступает из простого файлового ввода: 

<input type="file" id="file" name="file" multiple>

Когда я нажимаю кнопку Submit, я хочу отправить эти три переменные через форму данных mulipart-form. ,Чтобы добавить свои данные формы, я использую небольшой скрипт, который прослушивает submit-событие: 

<script>
  var form = document.forms.namedItem("fileinfo");
  form.addEventListener('submit', function(ev) {
    var formData = new FormData(form);
    formData.append('file-kind', document.getElementById('inputFileKind').value);
    formData.append('node-id', document.getElementById('inputNodes').value);
  }, false);
</script>

Когда я пытаюсь проверить, выдает ошибку, что multipart-formdata не имеет правильной формы /нужная информация не может быть получена из расположения содержимого.

Так у вас, ребята, есть идеи, что можно улучшить в моем HTML-коде?

...