HTML + JS - Remise à zéro du nom du fichier dans le texte lors de l'ajout d'un nouveau bouton de fichier

Question

J'ai un bouton ajouter, comme celui-ci, pour ajouter plus <input type="file">:

Et il fonctionne, quand je clique sur le bouton, il appelle une méthode pour ajouter un nouveau sélecteur de fichier.

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; 
} 

Mais quand je choisis un fichier, le nom du fichier réinitialise retour à No file chosen.

choisissez un fichier:

Cliquez sur Ajouter, remet à zéro!?!?!?

Est-ce que quelqu'un sait pourquoi ?! J'ai fait chaque nom différent, je pensais que c'était le cas, mais non!

Answer 1

Le problème est que vous dupliquez le texte HTML à l'intérieur du div #attachment_inner, pas les objets de document qui sont les enfants de l'objet div. Le texte qui représente le sélecteur de fichier input n'a pas d'attribut représentant le nom de fichier le plus récemment choisi. Cette information est dans l'objet input. Bien que l'objet ait été construit à partir de texte HTML, ce texte n'est pas réécrit pour refléter de nouvelles informations telles que le nom du fichier choisi.

La solution consiste à utiliser cloneNode() pour effectuer une copie complète de l'objet que vous souhaitez dupliquer.

Dans l'extrait ci-dessous, je clone le div contenant le sélecteur de fichier de sorte que vous ayez également une copie de la balise sf:errors et de tout ce que vous pourriez souhaiter avoir avec le bouton. En outre, le conteneur div facilite la mise en page. Pour éviter d'avoir plusieurs divs avec le même id, j'ai changé 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>