上传前预览文件名

Question

我想显示要在上传之前在list_file div中上传的文件名列表，是否有引用？

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="name_file">
    <div id="list_file"></div>
</form>

Answer 1

应该为输入分配multiple属性，以允许选择多个文件。

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" multiple id="files" name="name_file">
    <div id="list_file"></div>
 </form>

稍后，JavaScript代码为：

var fileInput = document.getElementById('files');
var listFile = document.getElementById('list_file');

fileInput.onchange = function () {
  var files = Array.from(this.files);
  files = files.map(file => file.name);
  listFile.innerHTML = files.join('<br/>');
}