web-dev-qa-db-fra.com

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

J'ai utilisé ceci:

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

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

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

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

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

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')
275
manji

Vous devez juste faire le code ci-dessous. Le premier [0] consiste à accéder à l'élément HTML et le second [0] au premier fichier du téléchargement du fichier (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 : "";
68
Diego Cotini

Chrome renvoie 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 du nom de fichier d'une chaîne, vous pouvez utiliser split() ...

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

jsFiddle .

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

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

jsFiddle .

... ou lastIndexOf() ...

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

jsFiddle .

23
alex

Obtenir le travail de chemin 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
17
Kotzilla

Voici comment je le fais, ça marche 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 travaillez sur plusieurs fichiers, vous devriez également pouvoir obtenir la liste en bouclant dessus:

e.target.files[0].name
13
bartlss

peut-être un peu plus pour éviter fakepath:

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

Que diriez-vous quelque chose comme ça?

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

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

4
GolezTrol

Récupérez le premier fichier à partir du contrôle, puis indiquez le nom du fichier. Le chemin d'accès au fichier sera ignoré sous Chrome, mais il corrigera le chemin d'accès pour les navigateurs IE. Lors de la sauvegarde du fichier, vous devez utiliser la méthode System.io.Path.GetFileName 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; 
}
3
Azhar Shahazad
<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>
2
real vishal
var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);
1
Mehul Rojasara

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.');
});
0
Fischer Tirado