web-dev-qa-db-fra.com

Comment obtenir le nom de fichier à partir de l'élément html input type = file en utilisant JavaScript ou JQuery?

Dans Google Chrome, j'ai essayé plusieurs façons + suivi et aucun ne me donne la valeur du nom de fichier qui a été joint, après validation je soumettrai le fichier. Mais toujours son indéfini ou val () ne trouve pas ..

Comment le résoudre?

console.log($("input[name='attachment[]']"));
/* Output:
[
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
, 
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
, 
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
]
*/

$.each($("input[name='attachment[]']"), function(i,v) {
    console.log(i);
    console.log(v); //v.val() does not exist... even uploaded a file and showing file

});

/* Output: 
0
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
1
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
2
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
*/

return false;
javascriptjqueryinternet-explorerfirefoxgoogle-chrome
17
YumYumYum

Cela devrait fonctionner:

$("input[name='attachment[]']").each(function() {
    var fileName = $(this).val().split('/').pop().split('\\').pop();
    console.log(fileName);
});

Vous ne pouvez pas obtenir le chemin complet du fichier, car cela dépend du navigateur que vous utilisez. La seule valeur commune à tous les navigateurs pour un fichier d'entrée est le nom du fichier.

19
sp00m

Je suggérerais quelque chose qui ressemble à ce qui suit:

​$('input:file').change(
    function(e){
        console.log(e.target.files[0].name);
    });​​​

JS Fiddle .

Si vous autorisez le téléchargement de plusieurs fichiers, utilisez l'attribut multiple, puis obtenez chacun des noms:

$('input:file').change(
    function(e){
        var f = e.target.files,
            len = f.length;
        for (var i=0;i<len;i++){
            console.log(f[i].name);
        }
    });​

JS Fiddle .

REMARQUE: dans les versions actuelles du navigateur, f[i].fileName devrait être f[i].name.

12
David Thomas

Le <input type=file> l'élément a un index zéro FileList accessible via sa variable membre files.

Vous pouvez accéder à cette liste via un sélecteur de requête:

document.querySelector('input[type=file]').files

Et vous pouvez accéder au nom du fichier avec la notation par points:

document.querySelector('input[type=file]').files[0].name

Il convient de noter que dans Chrome 53, Firefox 49 et la version actuelle spécification W3C pour FileAPI , files est une liste de type tableau non un tableau réel. Vous pouvez accéder à chaque objet fichier via son index, mais vous n'aurez accès à aucun prototype de tableau sans d'abord convertir la liste en tableau.

4
worc

for

<input type="file" mutiple onchange="getSongs(this.files)"/>

utilisation

function getSongs(files){
  ...
  for(var i = 0; i < files.length; i++){
     file=files[i];
     filename=file.fileName;
  }
}

si l'entrée est juste pour un seul fichier, utilisez simplement l'attribut name

$("type=['file']").attr('name');
0
panda