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

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)?

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, '')

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 : "";

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 .

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

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

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);

Que diriez-vous quelque chose comme ça?

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

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

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; 
} 

<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>

var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);

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

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>

Nous pouvons également le supprimer en utilisant match

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