时间戳

首页 > 解决方案 > 具有多个文件输入的表单

javascript - 具有多个文件输入的表单

问题描述

我有一个动态表单的应用程序，可以同时上传给不同的人。

每个人都有不同的输入文件，并且可以添加更多 2 个动态输入。

<div id="InputsWrapper_1">
<div><input type="file" name="arquivoDep_1_[]" id="1" value="" multiple><a href="#" class="removeclass"></a></div>
</div>

<div id="AddMoreFileId_1">
<a href="#" id="AddMoreFileBox_1" class="btn btn-info adiciona">Add field</a><br><br>
</div>
<div id="lineBreak"></div>

 <div id="InputsWrapper_2">
<div><input type="file" name="arquivoDep_2_[]" id="2" value="" multiple><a href="#" class="removeclass"></a></div>
</div>

<div id="AddMoreFileId_2">
<a href="#" id="AddMoreFileBox_2" class="btn btn-info adiciona">Add field</a><br><br>
</div>

当我提交此表格时，我有此回复

<input id="1" type="file" name="arquivoDep_1_[]" value="" multiple="">
<input type="file" name="arquivoDep_1_[]">

<input id="2" type="file" name="arquivoDep_2_[]" value="" multiple="">
<input type="file" name="arquivoDep_2_[]">

没关系。两个人的两个文件。

我怎样才能附加这些文件..有点像

$.each($("input[type=file]"), function(i, obj) 
{
    $.each(obj.files,function(j, file)
    {
        form_data.append('arquivoDep_x_[]', file, file.name);
    })
});

标签： javascriptjqueryajax

解决方案

首先我们在 2020 年，检查你是否真的需要 jQuery：http: //youmightnotneedjquery.com/

然后你可以使用这样的多部分形式的数据：

<script type="text/javascript">
  const formElement = document.querySelector('form');

  formElement.addEventListener('submit', e => {
    e.preventDefault();

    const request = new XMLHttpRequest();

    const formData = new FormData();

    const formElements = formElement.elements;

    const data = {};

    for (let i = 0; i < formElements.length; i++) {
      const currentElement = formElements[i];
      if (!['submit', 'file'].includes(currentElement.type)) {
        data[currentElement.name] = currentElement.value;
      } else if (currentElement.type === 'file') {
        if (currentElement.files.length === 1) {
          const file = currentElement.files[0];
          formData.append(`files.${currentElement.name}`, file, file.name);
        } else {
          for (let i = 0; i < currentElement.files.length; i++) {
            const file = currentElement.files[i];

            formData.append(`files.${currentElement.name}`, file, file.name);
          }
        }
      }
    }

    formData.append('data', JSON.stringify(data));

    request.open('POST', 'https://example.com');

    request.send(formData);
  });
</script>

来源：上传 | Strapi 文档

推荐阅读