jQuery : récupérer le nom du fichier sélectionné dans <input type="file" />

Question

jQuery : récupérer le nom du fichier sélectionné dans <input type="file" />

Demandé el 19 de Août, 2009: Quand la question a-t-elle été
202945 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Ce code devrait fonctionner dans IE (ne le teste même pas dans Firefox), mais il ne le fait pas. Ce que je veux, c'est afficher le nom du fichier joint. Vous pouvez m'aider ?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>

Demandé el 19 de Août, 2009 par Utilisateur non enregistré

Answer 1

5 Réponses

Answer 2

148voto

Thinker Points 7239

C'est aussi simple que d'écrire :

$('input[type=file]').val()

Quoi qu'il en soit, je suggère d'utiliser l'attribut name ou ID pour sélectionner votre entrée. Et avec l'événement, cela devrait ressembler à ceci :

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});

Répondu el 19 de Août, 2009 par Thinker (7239 Points )

Answer 3

20voto

James111 Points 948

La méthode la plus simple consiste à utiliser la ligne suivante de l'application jquery en l'utilisant, vous n'obtiendrez pas le /fakepath absurde, vous obtenez directement le fichier qui a été téléchargé :

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

D'autres commandes utiles sont :

Pour obtenir le nom du fichier :

$('input[type=file]')[0].files[0].name; // This gets the file name

Pour obtenir le type de fichier :

Si je devais télécharger un PNG, il retournerait image/png

$("#imgUpload")[0].files[0].type

Pour obtenir la taille (en octets) du fichier :

$("#imgUpload")[0].files[0].size

Vous n'avez pas non plus besoin d'utiliser les commandes suivantes on('change' vous pouvez obtenir les valeurs à tout moment. Par exemple, vous pouvez avoir un téléchargement de fichier et lorsque l'utilisateur clique sur upload vous utilisez simplement les commandes que j'ai listées.

Répondu el 26 de Novembre, 2015 par James111 (948 Points )

Answer 4

19voto

pazhyn Points 131

$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

Ce code ne montrera pas C:\fakepath\ avant le nom du fichier dans Google Chrome en cas d'utilisation de la fonction .val() .

Répondu el 12 de Février, 2014 par pazhyn (131 Points )

Answer 5

4voto

Anil Gupta Points 410

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>

Répondu el 10 de Décembre, 2014 par Anil Gupta (410 Points )

Answer 6

3voto

ihmar Points 11

J'avais utilisé ce qui suit qui a fonctionné correctement.

$('#fileAttached').attr('value', $('#attachment').val())

Répondu el 7 de Juin, 2010 par ihmar (11 Points )

jQuery : récupérer le nom du fichier sélectionné dans <input type="file" />

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

jQuery : récupérer le nom du fichier sélectionné dans <input type="file" />

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: