jQuery: récupère le nom du fichier sélectionné à partir de <input type = “file” />

90

Ce code devrait fonctionner dans IE (ne le testez même pas dans Firefox), mais ce n'est pas le cas. Ce que je veux, c'est afficher le nom du fichier joint. De l'aide?

<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>
jquery events copy file-io
la source
Vérifiez ma réponse, je pense que c'est le moyen le meilleur et le plus compréhensible d'y parvenir.
James111

Réponses:

147

C'est aussi simple que d'écrire:

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

Quoi qu'il en soit, je suggère d'utiliser l'attribut nom 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());
});
Penseur
la source
Je vous remercie! Cela a fonctionné sur le problème précédent (et simplifié) que j'ai posé, mais cela ne fonctionne pas sur la version étendue.
comment obtenir le chemin complet du fichier le code ci-dessus ne donne que le nom du fichier.
Khurram Ijaz
3
@PHP Priest, vous ne pouvez pas. Les navigateurs n'exposent pas ce genre d'informations.
zneak
2
@PHP Priest, si vous pouviez faire cela, vous pourriez transmettre subrepticement des données sur le système de fichiers de l'utilisateur via AJAX et l'utilisateur ne le saurait probablement jamais. Imaginez à quel point ce serait pire si vous pouviez définir par programme la valeur d'une entrée de fichier. Ouais. Problèmes de sécurité.
jinglesthula
1
Cela semble un peu exagéré? La façon dont j'ai énuméré est beaucoup plus facile et compréhensible.
James111
20

Le moyen le plus simple consiste simplement à utiliser la ligne suivante de jquery , en utilisant cela, vous n'obtenez pas le /fakepathnon - sens, 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

Quelques 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 du fichier:

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

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

Pour obtenir la taille (en octets) du fichier:

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

De plus, vous n'êtes pas obligé d'utiliser ces commandes on('change', vous pouvez obtenir les valeurs à tout moment, par exemple, vous pouvez avoir un fichier téléchargé et lorsque l'utilisateur clique upload, vous utilisez simplement les commandes que j'ai répertoriées.

James111
la source
Pourquoi ai-je une erreur Impossible de lire la propriété «nom» non définie?
Gagantous
19 
$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

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

Anatolii Pazhyn
la source
4 
<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>
Anil Gupta
la source
Merci! Cela a été utile pour saisir le nom réel du fichier téléchargé et non le chemin complet.
Evan M
3

J'avais utilisé la suite qui fonctionnait correctement. 

$('#fileAttached').attr('value', $('#attachment').val())
ihmar
la source
2 
//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );
carré rouge
la source
1

Ajoutez un bouton de réinitialisation caché:

<input id="Reset1" type="reset" value="reset" class="hidden" />

Cliquez sur le bouton de réinitialisation pour effacer l'entrée.

$("#Reset1").click();
Daniel ye
la source
1
Pouvez-vous cliquer sur un bouton caché?
DaveWalley
-1 
<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

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

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>
Raghuraj Singh Gurjar
la source
merci mec je cherchais ça je sais que ce n'est pas le sujet mais c'était ma réponse tu sais;)
Tarek.Eladly