Question

我有一个代码可以复制文件名并将其添加到文本区域。一切正常，但是当您添加更多文件时，第一个文件将被删除。如何解决？

updateList = function() {
  var input = document.getElementById('file');
  
  var output = document.getElementById('fileList');
  
  output.innerHTML = '';
  for (var i = 0; i < input.files.length; ++i) {
    output.innerHTML += '\n' + input.files.item(i).name + '';
  }
  output.innerHTML += ' \n';
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Display file name in page after selecting file in file input</title>
</head>

<form>
   <input type="file" name="file" id="file" multiple 
       onchange="javascript:updateList()" />
<br/>Selected files:
<textarea id="fileList"></textarea>
    <script  src="js/index.js"></script>
</body>
</html>

字段：https://jsfiddle.net/yhw8zfue/

Answer 1

您正在将textarea值设置为空字符串。

您可以通过删除以下行来解决：

I

Answer 2

添加更多文件时，该功能将再次运行并更新文件列表。但是在您的代码中，您可以在此处重置文件列表：

output.innerHTML = '';

因此，您想在其中拥有什么。替换为：

updateList = function() {
  var input = document.getElementById('file');
  var output = document.getElementById('fileList');
  output.innerHTML = output.value;
  for (var i = 0; i < input.files.length; ++i) {
    output.innerHTML += '\n' + input.files.item(i).name + '';
  }
  output.innerHTML += ' \n';
  }

将文件名从上传复制到文本区域

2 个答案: