点击ADD ANOTHER IMAGE按钮时文件输入框已选值消失如何修复

你的判断完全正确。使用innerHTML +=追加内容时，浏览器执行逻辑是：

1. 读取new-field容器内所有现有DOM，序列化为纯HTML字符串
2. 把新输入框的HTML代码拼接到这个字符串末尾
3. 把拼接后的完整字符串重新解析为DOM，替换掉容器内原有的所有内容

这个序列化-重渲染的过程中，file输入框已选中的文件属于DOM运行时的状态数据，不会被写入序列化后的HTML字符串，重渲染后的输入框自然会回到未选择的初始状态，显示“No file chosen”。

另外原代码还有三个隐性问题：

• 每新增一组输入框就多渲染一个提交按钮，一个表单只需要一个提交按钮即可，多余按钮会造成交互混乱
• file输入框的name属性没有加数组标识，多文件提交时后端只会接收到最后一个选中的文件
• 原class属性写为ins=file属于笔误，会导致对应CSS样式无法匹配

放弃innerHTML拼接的写法，改用原生DOM创建节点的方式追加新输入框，这种方式只会新增节点，不会重绘容器内已有的DOM元素，完全不会影响原有输入框的选中状态。

修正后的HTML模板 #

<html>
    <head>

    </head>
    <body>
        <form action="" enctype="multipart/form-data" method="post">
            <input type="file" name="pic[]" accept="image/*" id="insert-file" class="ins-file">
            <button id="add-img" type="button">ADD ANOTHER IMAGE</button>
            <div id="new-field"></div>
            <input type="submit" id="submit-btn" class="submit-btn">
            <script src="{{ url_for('static', filename='upload.js') }}"></script>
        </form>
    </body>
</html>

修正后的upload.js代码 #

const addImg = document.getElementById('add-img')
const newField = document.getElementById('new-field')

addImg.addEventListener('click', function() {
    // 新建file输入节点
    const fileInput = document.createElement('input')
    fileInput.type = 'file'
    fileInput.name = 'pic[]'
    fileInput.accept = 'image/*'
    fileInput.className = 'ins-file'
    // 直接追加到容器末尾，不改动已有节点
    newField.appendChild(fileInput)
})

适配说明 #

• 所有file输入框统一使用name="pic[]"格式，如果你用Flask后端，可以直接通过request.files.getlist('pic')获取所有上传的图片文件
• 提交按钮统一放在表单底部，不需要重复创建
• 修正了原代码中class属性的笔误，确保样式能正常匹配

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