javascript - 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 文本构建的，但该文本不会被重写以反射(reflect)新信息，例如所选文件的名称。

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

在下面的代码片段中，我克隆了包含文件选择器的 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>