web-dev-qa-db-fra.com

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

Ce code devrait fonctionner dans IE (ne le testez même pas dans Firefox), mais cela ne fonctionne pas. 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>
jqueryeventscopyfile-io
88
ConNen

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 event, ça devrait ressembler à ça:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});
145
Thinker
$('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 de fichier dans Google Chrome en cas d'utilisation de .val().

19
Anatolii Pazhyn

Le moyen le plus simple est simplement d’utiliser la ligne suivante de jquery, en utilisant ceci vous n’obtenez pas le /fakepath nonsense, 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 fichier PNG, il retournerait image/png

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

Pour obtenir la taille (en octets) du fichier:

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

De plus, vous n'avez pas à utiliser ces commandes on('change', vous pouvez obtenir les valeurs à tout moment, par exemple vous pouvez télécharger un fichier et lorsque l'utilisateur clique sur upload, vous utilisez simplement les commandes que j'ai énumérées.

19
James111
<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>
4
Anil Gupta

J'avais utilisé la suite qui fonctionnait correctement.

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

Ajoutez un bouton de réinitialisation masqué:

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

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

$("#Reset1").click();
1
daniel ye