Utilisez jQuery pour obtenir le nom de fichier sélectionné de l'entrée du fichier sans le chemin

154

J'ai utilisé ceci:

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

pour obtenir le nom de fichier sélectionné, mais il a renvoyé le chemin complet, comme dans "C: \ fakepath \ filename.doc". La partie "fakepath" était en fait là - je ne sais pas si elle est censée l'être, mais c'est la première fois que je travaille avec le nom de fichier des téléchargements de fichiers.

Comment puis-je simplement obtenir le nom du fichier (filename.doc)?

Marky
la source
11
Le navigateur modifie le chemin réel en C:\fakepath\ afin que les sites malveillants ne puissent pas utiliser javascript pour glaner des informations sur la structure de répertoires de votre ordinateur.
drudge

Réponses:

295
var filename = $('input[type=file]').val().split('\\').pop();

ou vous pouvez simplement faire (car c'est toujours C:\fakepathajouté pour des raisons de sécurité):

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')
manji
la source
1
Exactement ce dont j'avais besoin, manji! J'ai aussi besoin de vérifier l'extension, donc j'ai utilisé votre exemple de cette façon: var extension = filename.split ('.'). Pop (); pour l'obtenir aussi! Merci!
marky
Est-ce Fakepathavec un F majuscule?
alex
16
@MikeDeSimone J'ai testé split ('\\'). Pop (); sur Win 7, Ubuntu 11.04 et Mac OS X et cela fonctionne bien sur tous.
Alex
3
@Alex: Wow, c'est assez fou. C'est donc juste une solution de contournement pour le mauvais code JS de quelqu'un qui ne sera jamais corrigé. J'exécute Safari sur un Mac et je vois "C: \ fakepath \" là-dedans. (Jouez avec dans jsfiddle .)
Mike DeSimone
1
Les fichiers Windows @ VítorBaptista ne peuvent pas avoir de barres obliques inverses dans leurs noms. C'est possible sur MacOS bien que "Vous devriez éviter d'utiliser des deux-points et des barres obliques dans les noms de fichiers et de dossiers car certains systèmes d'exploitation et formats de lecteur utilisent ces caractères comme séparateurs de répertoire" comme décrit sur le site Web d'Apple
joao.arruda
68

Il vous suffit de faire le code ci-dessous. Le premier [0] est d'accéder à l'élément HTML et le second [0] est d'accéder au premier fichier du fichier upload (j'ai inclus une validation au cas où il n'y aurait pas de fichier):

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";
Diego Cotini
la source
1
Une chose à considérer lors de l'utilisation de cette option: lorsque vous cliquez à nouveau sur le bouton «Choisir un fichier» pour afficher la fenêtre de fichier ouverte, puis cliquez sur le bouton d'échappement, une erreur de console sera générée.
luke_mclachlan
Oui, vous avez raison, mais l'intention était de mettre juste le code pour obtenir le nom car comme le code obtient le nom à partir d'une position codée en dur, il serait nécessaire de vérifier s'il existe un fichier (un pour ce cas, nous parlons dans un seul fichier, mais pourrait en avoir plus et le code devrait être itéré par tous les éléments). Mais bien sûr, je vais mettre à jour le code et inclure cette validation.
Diego Cotini
23

Chrome revient C:\fakepath\...pour des raisons de sécurité - un site Web ne devrait pas être en mesure d'obtenir des informations sur votre ordinateur, telles que le chemin d'accès à un fichier sur votre ordinateur.

Pour obtenir uniquement la partie nom de fichier d'une chaîne, vous pouvez utiliser split()...

var file = path.split('\\').pop();

jsFiddle .

... ou une expression régulière ...

var file = path.match(/\\([^\\]+)$/)[1];

jsFiddle .

... ou lastIndexOf()...

var file = path.substr(path.lastIndexOf('\\') + 1);

jsFiddle .

Alex
la source
21

Obtenez le chemin d'accès avec tous les systèmes d'exploitation

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

Exemple

C:\fakepath\filename.doc 
/var/fakepath/filename.doc

Les deux reviennent

filename.doc
filename.doc
Kotzilla
la source
L'exemple de code var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');utilise jQuery.
Zarepheth
13

Voici comment je le fais, cela fonctionne plutôt bien.

Dans votre HTML, faites:

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

Ensuite, dans votre fichier js, créez une fonction simple:

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

Si vous faites plusieurs fichiers, vous devriez également pouvoir obtenir la liste en boucle sur ceci:

e.target.files[0].name
bartlss
la source
Puisque l'ID de champ ne fait rien dans ce contexte, la fonction dans JS devrait avoir 1 paramètre de moins, juste e au lieu de fileSelect (id, e) juste fileSelect (e). Merci pour la solution :).
Jasper Lankhorst
8

peut-être un ajout pour éviter les faux chemins:

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);
vafrcor
la source
5

Que diriez-vous quelque chose comme ça?

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);
Bertrand Marron
la source
4

Doit-il être jquery? Ou pouvez-vous simplement utiliser le natif de JavaScript yourpath.split("\\")pour diviser la chaîne en un tableau?

GolezTrol
la source
3

Obtenez le premier fichier du contrôle, puis obtenez le nom du fichier, il ignorera le chemin du fichier sur Chrome et effectuera également une correction du chemin pour les navigateurs IE. Lors de l'enregistrement du fichier, vous devez utiliser la System.io.Path.GetFileNameméthode pour obtenir le nom du fichier uniquement pour les navigateurs IE

var fileUpload    = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files         =  fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i < files.length; i++) { 
  mediafilename = files[i].name; 
} 
Azhar Shahazad
la source
2
<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(\/|\\)/, '');
        // .. do your magic

        $('#filename').html(filename);
    });
</script>
vrai vishal
la source
1
var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);
Mehul Rojasara
la source
1

Cette alternative semble la plus appropriée.

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});
Fischer Tirado
la source
0

Ici, vous pouvez appeler comme ceci Laissez ceci est mon contrôle de fichier d'entrée

  <input type="file" title="search image" id="file" name="file" onchange="show(this)"  />

Voici maintenant mon Jquery qui est appelé une fois que vous sélectionnez le fichier

<script type="text/javascript">
    function show(input) {
        var fileName = input.files[0].name;
        alert('The file "' + fileName + '" has been selected.');               
            }

</script>
Debendra Dash
la source
0

Nous pouvons également le supprimer en utilisant match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);
Tammy
la source