Use jQuery para obter o nome de arquivo selecionado da entrada do arquivo sem o caminho

Eu usei isso:

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

para selecionar o nome do arquivo, mas ele retornou o caminho completo, como em "C: \ fakepath \ filename.doc". A parte "fakepath" estava realmente lá - não tenho certeza se deveria estar, mas esta é minha primeira vez trabalhando com o nome de arquivo dos uploads de arquivos.

Como posso obter o nome do arquivo (filename.doc)?

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

ou você pode simplesmente fazer (porque sempre C:\fakepathé adicionado por motivos de segurança):

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

Você só precisa fazer o código abaixo. O primeiro [0] é para acessar o elemento HTML e o segundo [0] é para acessar o primeiro arquivo do upload do arquivo (eu incluí uma validação no caso de não haver arquivo):

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";

O Chrome retorna C:\fakepath\...por motivos de segurança - um site não deve obter informações sobre o seu computador, como o caminho para um arquivo no seu computador.

Para obter apenas a parte do nome do arquivo de uma string, você pode usar split()...

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

jsFiddle .

... ou uma expressão regular ...

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

jsFiddle .

... ou lastIndexOf()...

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

jsFiddle .

Obtenha trabalho de caminho com todos os sistemas operacionais

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

Exemplo

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

Ambos retornam

filename.doc
filename.doc

Aqui está como eu faço, funciona muito bem.

No seu HTML, faça:

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

Em seguida, no seu arquivo js, ​​crie uma função simples:

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

Se você estiver criando vários arquivos, também poderá conseguir a lista fazendo um loop sobre isso:

e.target.files[0].name

talvez alguma adição para evitar o caminho falso:

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 tal algo como isso?

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

Tem que ser jquery? Ou você pode simplesmente usar o nativo do JavaScript yourpath.split("\\")para dividir a string em uma matriz?

Obtenha o primeiro arquivo do controle e, em seguida, obtenha o nome do arquivo, ele ignorará o caminho do arquivo no Chrome e também fará a correção do caminho para os navegadores IE. Ao salvar o arquivo, você deve usar o System.io.Path.GetFileNamemétodo para obter o nome do arquivo apenas para navegadores 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);

Essa alternativa parece a mais apropriada.

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

Aqui você pode ligar assim Deixe este é o meu controle de arquivo de entrada

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

Agora, aqui está o meu Jquery, que é chamado depois que você seleciona o arquivo

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

</script>

Também podemos removê-lo usando match

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