将文件数据作为多部分表单数据发送到服务器

Send file data to server as multipart form data

本文关键字:数据 表单 服务器 多部 文件      更新时间:2023-09-26

我在表单外有一个文件输入元素。 在表单提交时,我想将文件内容作为多部分表单数据发送到服务器。我无法将文件元素插入表单。有没有其他方法可以做到这一点。

<input type="file" class="file"  style="width:117px"  name="c2vFile" onchange="onFileChange2(this.value);"/>
    <form style="display:none" id="frmActivate" enctype="multipart/form-data">
        <input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
        <input type="hidden" id="act_remarks" name="comments" />
        <input type="hidden" id="activatee" name="activatee" />
    </form>

文件输入需要在表单标签内。你说过你不能,但为什么不呢?您需要删除"display:none",它目前没有任何用途,因为输入都是隐藏的。

您可以使用 AJAX 提交在表单标记之外发送文件。您可以按照以下链接将有助于使用 ajax 发送文件。但是您必须在单击提交按钮时调用此函数。文件上传完成后,应进行表单提交。

jQuery Ajax 文件上传

我用这个做了一个小技巧,它奏效了,请查看它是否对您有帮助在提交表单之前,请添加侦听器并将输入字段附加到表单中。

document.getElementById('frmActivate').addEventListener("submit", function() {
  var fileinput = document.getElementById('filein');//take the file input 
  var thisel = document.getElementById('frmActivate');// take the form element
  var cln = fileinput.cloneNode(true);//clone the file input element
  thisel.appendChild(cln);//append the clone in the form element
  thisel.submit();
 
})
<input type="file" id="filein" class="file" style="width: 117px" name="c2vFile" onchange="onFileChange2(this.value);" />
<form style="" id="frmActivate" enctype="multipart/form-data">
  <input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
  <input type="hidden" id="act_remarks" name="comments" />
  <input type="hidden" id="activatee" name="activatee" />
  <input type="submit" value="submit" />
</form>
<?php var_dump($_FILES);//to confirm if file is submitted ?>
您可以在此演示中看到此代码的工作原理希望这对你有用。