如何在 JavaScript 中显示多个附件

Question

我是 JavaScript 和 HTML 的新手，我想在我的网站中附加一些文件。问题是：当我想附加一些文件时，我从视图中选择了它们，但在视图中只显示一个文件而不是我选择的文件列表。

例如，如果我附加 file1、file2 和 file3，它只显示 file1，如下所示：

所以我想得到这个情况：

代码如下：

我写的 JS 来解决这个问题，但它显示了相同的结果（只出现一个文件）：

const fileinput = require("./button");
const updateList = () => {
  var arrayFiles = document.getElementById("input_issue").files;
  for (i = 0; i < arrayFiles.length; i++) {
    fileinput.append('<i class="text">arrayFiles[i].name</i>')
  }
}

<form id="issueModalFormAttachment" method="POST">
  <table>
    <tr class="form-group">
      <td class="label">{% translate 'Attachments' %}</td>
      <td class="field">
        <input id="input_issue" name="input_issue[]" type="file" class="file" multiple data-show-upload="true" data-show-caption="true">
      </td>
    </tr>
  </table>
</form>

我不知道它是否有用，因为我对 html 和 js 一无所知，并且其他人编写了整个 HTML 和 JS 代码......但是我的导师给了我解决这个问题的问题

ArrayFiles 应该是我要上传的文件数组。我认为使用 for 循环我可以扫描数组并将文件附加到按钮中。

有人可以帮助我吗？再次为无知表示歉意

编辑：我是这样解决的

const setupInput = () => {
     $('#input_issue').change( () => {

        let arrayFiles = document.getElementById("input_issue").files;
        for(i=1;i<arrayFiles.length;i++){
            let t = $('#button_file_upload_issue i.text').text();
            $('#button_file_upload_issue i.text').text(t + ', '+ arrayFiles[i].name);
        }

    })
}

Answer 1

试试这样的：

fileinput.innerHTML += '<i class="text">arrayFiles[i].name</i>';