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

153

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

marky
fonte
11
O navegador altera o caminho real para C:\fakepath\ que sites mal-intencionados não possam usar o javascript para coletar informações sobre a estrutura de diretórios do seu computador.
Drudge

Respostas:

294
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, '')
manji
fonte
1
Exatamente o que eu precisava, manji! Também preciso verificar a extensão, então usei o seu exemplo desta maneira: var extension = filename.split ('.'). Pop (); para conseguir isso também! Obrigado!
28811
É Fakepathcom um F maiúsculo?
alex
16
@MikeDeSimone Eu testei split ('\\'). Pop (); no Win 7, Ubuntu 11.04 e Mac OS X e funciona bem em todos eles.
8284 Alex
3
@Alex: Uau, isso é muito louco. Portanto, é realmente apenas uma solução alternativa para o código JS incorreto de alguém que nunca foi corrigido. Estou executando o Safari em um Mac e vejo "C: \ fakepath" lá. (Tocar com ele em jsFiddle .)
Mike DeSimone
1
@ VítorBaptista Os arquivos do Windows não podem conter barras invertidas em seus nomes. É possível em MacOS embora "Você deve evitar o uso de dois pontos e barras nos nomes de arquivos e pastas, porque alguns sistemas operacionais e formatos de unidades de usar estes caracteres como separadores de diretório" , conforme descrito no site da Apple
joao.arruda
68

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 : "";
Diego Cotini
fonte
1
Uma coisa a considerar ao usar esta opção: quando você clicar novamente no botão 'Escolher arquivo' para abrir a janela do arquivo aberto e clicar no botão de escape, um erro do console será gerado.
luke_mclachlan
Sim, você está certo, mas a intenção era colocar apenas o código para obter o nome porque, como o código está obtendo o nome de uma posição codificada, seria necessário verificar se há algum arquivo (neste caso, estamos falando em apenas um arquivo, mas poderia ter mais e o código precisaria iterar por todos os elementos). Mas claro, vou atualizar o código e incluir essa validação.
Diego Cotini
23

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 .

alex
fonte
21

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
Kotzilla
fonte
O código de exemplo var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');está usando jQuery.
Zarepheth 7/08
13

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
bartlss
fonte
Como o ID do campo não faz nada nesse contexto, a função em JS deve ter 1 parâmetro a menos, apenas e, em vez de fileSelect (id, e), apenas fileSelect (e). Obrigado pela solução :).
Jasper Lankhorst
8

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);
vafrcor
fonte
5

Que tal algo como isso?

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

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

GolezTrol
fonte
3

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; 
} 
Azhar Shahazad
fonte
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>
vishal real
fonte
1
var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);
Mehul Rojasara
fonte
1

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

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>
Debendra Dash
fonte
0

Também podemos removê-lo usando match

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