主页 / 问题 / 1542618
Accepted
Denis
Asked:2023-09-26 08:35:57 +0000 UTC2023-09-26 08:35:57 +0000 UTC

不断地将文件添加到输入类型文件中

  • 772

这是 HTML

<form>
   <input name="file" id="myfiles" multiple type="file">
</form>

这是JS

var fileInput = document.querySelector("#myfiles");
var pullfiles=function(){
      var files = fileInput.files;
      var fl=files.length;
      console.log(fl);
  }
 document.querySelector("#myfiles").onchange=pullfiles;

再次将文件添加到#myfiles 时，console.log(fl) 仅报告新添加的文件数。也就是说，新文件不会添加到先前添加的文件中。因此，只有最近添加的文件才会发送到您的电子邮件。所有文件必须通过电子邮件到达。怎么做？

javascript

1 个回答

  1. Best Answer

    您需要将添加的文件保存到容器（files）中，并在发送时从中收集文件

    const fileInput = document.querySelector('#myfiles');
const list = document.querySelector('#list');

const files = [];
const pushFiles = function(){
    // files.push(...Array.of(...fileInput.files).filter(f => !files.some(f2 => f2.name == f.name)));
    files.push(...fileInput.files);
    
    list.innerHTML = files.map(f => f.name).join('<br>');
};

const sendFiles = function(){
    const formData = new FormData();
    
    for (const file of files) {
      formData.append('files', file);
    }
    
    console.log(formData.getAll('files'));
};

document.querySelector('#myfiles').onchange = pushFiles;
document.querySelector('#send').onclick = sendFiles;
    <form>
   <input name="file" id="myfiles" multiple type="file">
</form>
<div id="list"></div>
<button id="send">Отправить</button>

    如果只需要添加唯一的文件，则必须过滤传入的文件列表。

    • 0

相关问题