Como obter o caminho completo do arquivo selecionado na alteração de <input type = 'file'> usando javascript, jquery-ajax?


240

Como obter o caminho completo do arquivo enquanto seleciona o arquivo usando <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

mas o filePath var contém o only namearquivo selecionado, não o arquivo full path.
Eu procurei na net, mas parece que, por razões de segurança, os navegadores (FF, chrome) apenas fornecem o nome do arquivo.
Existe alguma outra maneira de obter o caminho completo do arquivo selecionado?




@nauphal obrigado pelo comentário, mas existe alguma outra maneira de obter o caminho completo do arquivo selecionado?
Yogesh Pingle

1
Se você deseja obter o caminho de um arquivo no servidor (por exemplo, criando uma interface da web para um utilitário de linha de comando para ser executado no servidor), você sempre pode criar o caminho relativo, enviá-lo como <opção> se use um widget em árvore ou digite adiante para permitir que o usuário o selecione e faça com que o servidor processe o arquivo.
dardenfall

Respostas:


164

Por motivos de segurança, os navegadores não permitem isso, ou seja, o JavaScript no navegador não tem acesso ao sistema de arquivos; no entanto, usando a API de arquivos HTML5, apenas o Firefox fornece uma mozFullPathpropriedade, mas se você tentar obter o valor, ele retornará uma string vazia:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

Então não perca seu tempo.

editar: se você precisar do caminho do arquivo para ler um arquivo, poderá usar a API FileReader . Aqui está uma pergunta relacionada ao SO: visualize uma imagem antes de ser carregada.


1
Veja este link , pois me ajudou com o mesmo problema.
Amir Tugi

... O título da pergunta vinculada é: Visualizar uma imagem antes de ser carregada .
indefinido

E ainda assim ele ficou me a URL para o caminho para enviar para o servidor
Amir Tugi

1
@AmirTugi Essa solução lê um arquivo. Não tem nada a ver com o caminho do arquivo no sistema de arquivos do usuário.
indefinido

Então, como este site poderia fazê-lo?
SaidbakR

102

Tente isto:

Ele fornecerá um caminho temporário, não o caminho exato; você pode usar esse script se desejar mostrar as imagens selecionadas, como neste exemplo do jsfiddle (tente selecionar imagens e outros arquivos): -

JSFIDDLE

Aqui está o código: -

HTML: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS: -

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

Não é exatamente o que você estava procurando, mas pode ser que possa ajudá-lo em algum lugar.


Existe uma maneira de fazer isso com outros tipos de arquivo: pdf, docx, etc. e, em vez da imagem, mostre um ícone? Para meus usos, quero armazenar os arquivos na página antes de enviá-los, dando ao usuário a chance de adicionar um comentário para carregar com ele como uma mensagem com um texto.
user1040975

Eu só preciso colocar o conteúdo de "tmppath" na barra de endereços do navegador? Eu tentei e não funciona.
MacGruber

@GangsarSwaPurba Infelizmente, ele não funciona no IE9 - consulte URL.createObjectURL () .
NaXa

@naXa bom, vou editar o meu comentário acima. UW, unfurtunately eu não posso editar o meu comentário
Gangsar Swapurba

2
Na terceira linha, você deve usar a variável tmppath em vez de URL.createObjectURL (event.target.files [0]), isso é mais otimizado.
Wessam El Mahdy

17

Você não pode fazer isso - o navegador não permitirá isso por questões de segurança.

Quando um arquivo é selecionado usando a entrada type = file object, o valor da propriedade value depende do valor da configuração de segurança "Incluir caminho do diretório local ao carregar arquivos para um servidor" para a zona de segurança usada para exibir a página da Web contendo o objeto de entrada.

O nome do arquivo completo do arquivo selecionado é retornado apenas quando essa configuração está ativada. Quando a configuração está desabilitada, o Internet Explorer 8 substitui a unidade local e o caminho do diretório pela string C: \ fakepath \ para evitar a divulgação inadequada de informações.

E outro

Você perdeu ); isso no final da função de evento de alteração.

Além disso, não crie uma função para o evento change, apenas use-a como abaixo,

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

19
Tentei o seu código, mas está me dando o caminho errado. meu arquivo está no Ddiretório, mas o valor está chegandoC:\fakepath\test.xls
Rahul Munjal

3
C: \ fakepath \ fileName.xls ... alguém sabe como resolver isso?
André Dos Santos

14

Você não pode. A segurança impede você de saber algo sobre o sistema de arquivamento do computador cliente - ele pode até não ter um! Pode ser um MAC, um PC, um Tablet ou uma geladeira com acesso à Internet - você não sabe, não pode saber e não saberá. E permitir que você tenha o caminho completo pode fornecer algumas informações sobre o cliente - principalmente se for uma unidade de rede, por exemplo.

Na verdade, você pode obtê-lo sob condições específicas, mas requer um controle ActiveX e não funcionará em 99,99% das circunstâncias.

Você não pode usá-lo para restaurar o arquivo para o local original de qualquer maneira (como você não tem absolutamente nenhum controle sobre onde os downloads são armazenados, ou mesmo se eles são armazenados); portanto, na prática, isso não é muito útil para você.


11

Você quis dizer isso?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});

4
isso não fornece caminho para o arquivo. Por que votou tantas vezes?
FlowUI. SimpleUITesting.com

7

Você pode usar o código a seguir para obter um URL local de trabalho para o arquivo carregado:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>


1

Você pode, se carregar uma pasta inteira for uma opção para você

<input type="file" webkitdirectory directory multiple/>

evento de alteração conterá:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

1

você nunca deve fazer isso ... e acho que tentar nos navegadores mais recentes é inútil (pelo que sei) ... todos os navegadores mais recentes, por outro lado, não permitirão isso ...

alguns outros links pelos quais você pode acessar, para encontrar uma solução alternativa, como obter o valor no servidor, mas não no lado do cliente (javascript)

Caminho completo da entrada do arquivo usando o jQuery
Como obter o caminho do arquivo do formulário de entrada HTML no Firefox 3


-1

elemento de arquivo tem e chamada de matriz filesque contém todas as coisas necessárias que você precisa

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

2
Ele não fornece o caminho completo do arquivo carregado.
Sergiu Mare

-3

Você pode obter o caminho completo do arquivo selecionado para carregar apenas pelo IE11 e MS Edge.

var fullPath = Request.Form.Files["myFile"].FileName;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.