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