在HTML中处理formData不能按预期工作

因此,Im目前正在为Web服务器从事复杂的项目,Im现在正在执行文件上传。 该Web服务器的后端是用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_kindnode_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_kindnode-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-Button时,我想通过mulipart-form-data发送这三个变量。要附加我的表单数据,我使用一个小脚本来侦听Submit-event:

<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代码有什么改进的想法吗?

jiay87 回答:在HTML中处理formData不能按预期工作

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3166839.html

大家都在问