Entrée de fichier Bootstrapped avec JS (en PHP)

Question

Je veux créer une page pour l'envoi de problèmes. Par conséquent, les utilisateurs peuvent vouloir télécharger une image avec le problème. La page entière utilise le bootstrap. J'ai regardé sur Google et j'ai aimé le plus https://codepen.io/claviska/pen/vAgmd. La dernière solution semblait bien. Mais je ne reçois pas le nom du fichier dans la zone de texte. Qu'est-ce que je fais de mal? J'ai utilisé le code indiqué dans le stylo:

<div class="form-group"> 
<label for="files">Select some screenshots to append</label> 
<div class="input-group"> 
<span class="input-group-btn"> 
<span class="btn btn-primary btn-file"> 
Browse&hellip; 
<input type="file" name="files" single> 
</span> 
</span> 
<input type="text" class="form-control" readonly> 
</div> 

JS:

$(function() { 

    // We can attach the `fileselect` event to all file inputs on the page 
    $(document).on('change', ':file', function() { 
     var input = $(this), 
      numFiles = input.get(0).files ? input.get(0).files.length : 1, 
      label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); 
     input.trigger('fileselect', [numFiles, label]); 
    }); 

    // We can watch for our custom `fileselect` event like this 
    $(document).ready(function() { 
     $(':file').on('fileselect', function(event, numFiles, label) { 

      var input = $(this).parents('.input-group').find(':text'), 
       log = numFiles > 1 ? numFiles + ' files selected' : label; 

      if (input.length) { 
       input.val(log); 
      } else { 
       if (log) alert(log); 
      } 

     }); 
    }); 

}); 

Ma page complète: http://gelbpunkt.troet.org/browsercheck/issue.php Bootstrap est inclus, ainsi que jQuery.

Answer 1

Définissez la valeur du champ d'entrée où l'alerte est, mais d'abord donner le champ d'entrée d'un ID comme fileName:

<input type="text" id="fileName" class="form-control" readonly> 

Ensuite, dans votre jquery, retirez l'alerte et définir le nom du fichier il:

if(log){ 
    //alert(log); 
    $("#fileName").val(log); 
} 

Voir sample