HTML + JS - 添加新文件按钮时文件名在文本中重置

Question

我有一个像这样的添加按钮来添加更多<input type="file">：

它确实有效，当我点击按钮时，它会调用一个方法来添加一个新的文件选择器。

HTML：

<div class="row" id="attachments_row">
          <div class="coffee-span-4">
            <label class="label label-1">Attachments</label>
          </div>
          <div class="coffee-span-6" id="attachments">
            <div id="attachment_inner">
                <input id="file_button" type="file" name="fileUpload0" size="50" /> 
                <sf:errors path="filepath" cssClass="rfqerror"></sf:errors>
            </div>
            <input type="button" value="+" style="float: left; margin-top: 10px; margin-bottom: 10px; padding: 5px;" onclick="makeNewAttachment();"/>
          </div>

          <div class="coffee-span-2" id="file-upload-button">
          </div>

          <br>
</div>

JS：

function makeNewAttachment() {
    var ai = document.getElementById("attachment_inner").innerHTML;
    var index = document.getElementById("attachment_inner").children.length;
    var ai_new = ai + "<input id='file_button' type='file' name='fileUpload" + index + "' size='50' />";
    document.getElementById("attachment_inner").innerHTML = ai_new;
}

但是当我选择一个文件时，文件名会重置回No file chosen。

选择一个文件：

点击添加，重置？！？！？！？

有人知道为什么吗？！ 我让每个名字都不一样，我以为是这样，但不是！

Answer 1

问题是您复制了 div #attachment_inner 内的 HTML 文本，而不是作为 div 对象子级的文档对象。代表文件选择器input 的文本没有代表最近选择的文件名的属性。该信息位于input 对象中。尽管该对象是从 HTML 文本构建的，但该文本不会被重写以反映新信息，例如所选文件的名称。

解决方案是使用cloneNode() 对要复制的对象进行深层复制。

在下面的 sn-p 中，我正在克隆包含文件选择器的 div，以便您还拥有 sf:errors 标记的副本以及您可能希望与按钮一起拥有的任何其他内容。此外，容器 div 使布局更容易。为了避免多个 div 具有相同的id，我将id="attachment_inner" 更改为class="attachment_inner"。

function makeNewAttachment() {
    var attachments = document.getElementById('attachments'),
        choosers = attachments.getElementsByClassName('attachment_inner'),
        numChoosers = choosers.length,
        newChooser = choosers[numChoosers - 1].cloneNode(true),
        input = newChooser.getElementsByTagName('input')[0];
    attachments.insertBefore(newChooser, document.getElementById('plusButton'));
    input.name = input.name.replace(/\d+$/, '' + numChoosers);
}

<div class="row" id="attachments_row">
          <div class="coffee-span-4">
            <label class="label label-1">Attachments</label>
          </div>
          <div class="coffee-span-6" id="attachments">
            <div class="attachment_inner">
                <input type="file" name="fileUpload0" size="50" /> 
                <sf:errors path="filepath" cssClass="rfqerror"></sf:errors>
            </div>
            <input id="plusButton" type="button" value="+" style="float: left; margin-top: 10px; margin-bottom: 10px; padding: 5px;" onclick="makeNewAttachment();"/>
          </div>

          <div class="coffee-span-2" id="file-upload-button">
          </div>

          <br>
</div>