上传前预览文件名

时间:2018-09-16 14:06:06

标签: javascript jquery

我想显示要在上传之前在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>

1 个答案:

答案 0 :(得分:0)

应该为输入分配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/>');
}