如何使用JavaScript实现不覆盖旧数据的多文件添加与展示功能？

你遇到的核心问题是每次点击"Add Document"时，直接用新的HTML内容替换了demo元素里的全部内容，而不是追加新内容。下面一步步帮你修改代码，实现多文件列表展示：

问题根源 #

原代码里这行是罪魁祸首：

document.getElementById("demo").innerHTML = fileData;

它会把demo里的所有旧内容清空，然后插入新的单条文件记录，自然会覆盖之前的内容。

修改方案 #

1. 改为追加内容而非替换 #

把赋值操作改成追加，用+=代替=，这样新的文件记录会加到旧内容后面：

document.getElementById("demo").innerHTML += fileData;

2. 优化文件路径显示 #

$('#file').val()返回的是浏览器的伪路径（比如C:\fakepath\test.pdf），用户看不到真实文件名，我们可以提取最后一段作为显示用的文件名：

let docPath = $('#file').val();
let docName = docPath.split('\\').pop(); // 提取真实文件名

3. 添加输入框清空逻辑 #

每次添加完成后，清空文件名输入框和文件选择器，避免用户重复提交相同内容：

$('#name').val('');
$('#file').val(''); // 清空文件选择

4. 完善文件选择按钮的触发逻辑 #

原代码里的"Select document"按钮没有绑定点击事件，用户点击它不会弹出文件选择框，需要补上这部分：

$('.choseDoc').click(function() {
    $('#file').click();
});

5. 增加空内容校验 #

防止用户在未输入文件名或未选择文件时添加空记录：

if (!filename || !docPath) {
    alert('请输入文件名并选择文件！');
    return;
}

完整修改后的代码 #

<div class="col-md-12 mb-3"> 
 <textarea class="form-control" id="name" placeholder="输入文件名"></textarea> 
</div> 
<div class="col-md-12 mb-3"> 
 <button type="button" class="btn btn-success w-100 choseDoc">Select document</button> 
 <input type="file" id="file" hidden> 
</div> 
<div class="col-md-12 mb-3"> 
 <button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button> 
</div> 
<div> 
 <p id = "demo"></p> 
</div> 
<script> 
// 绑定文件选择按钮的点击事件
$('.choseDoc').click(function() {
    $('#file').click();
});

function myFunction() { 
 let filename= $('#name').val().trim(); 
 let docPath = $('#file').val(); 

 // 校验空内容
 if (!filename || !docPath) {
    alert('请输入文件名并选择文件！');
    return;
 }

 // 提取真实文件名
 let docName = docPath.split('\\').pop();

 let fileData = `<div class="tab-content col-12 mt-4" id="myTabContent-2"> 
 <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab"> 
 <div class="col-md-12"> 
 <ul class="perfomer-lists m-0 p-0" id=""> 
 <li class="d-flex mb-4 align-items-center"> 
 <img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;"> 
 <div class="media-support-info ml-3"> 
 <a class="font-size-12 font-weight-600"><b>${filename}</b></a> 
 <p class="mb-0 font-size-12"> ${docName}</p> 
 </div> 
 </li> 
 </ul> 
 </div> 
 </div> 
 </div>`; 

 // 追加内容而非替换
 document.getElementById("demo").innerHTML += fileData;

 // 清空输入框和文件选择
 $('#name').val('');
 $('#file').val('');
}
</script>

额外优化建议 #

• 如果需要支持删除单个文件记录，可以给每个li元素添加一个删除按钮，绑定删除事件移除对应的DOM节点。
• 可以用数组存储所有添加的文件数据，而不是直接操作DOM，这样后续提交表单时更容易收集所有文件信息（比如通过FormData提交）。

内容的提问来源于stack exchange，提问作者lilin