Como resolver o caminho C: \ fake?

256
<input type="file" id="file-id" name="file_name" onchange="theimage();">

Este é o meu botão de upload.

<input type="text" name="file_path" id="file-path">

Este é o campo de texto onde eu tenho que mostrar o caminho completo do arquivo.

function theimage(){
 var filename = document.getElementById('file-id').value;
 document.getElementById('file-path').value = filename;
 alert(filename);
}

Este é o JavaScript que resolve o meu problema. Mas no valor de alerta me dá

C:\fakepath\test.csv 

e Mozilla me dá:

test.csv

Mas eu quero o caminho completo do arquivo local . Como resolver esse problema?

Se isso ocorrer devido a um problema de segurança do navegador, qual deve ser a maneira alternativa de fazer isso?

e_maxm
fonte
41
Esta é a implementação de segurança do navegador - o navegador está protegendo você de acessar sua estrutura de disco. Pode ajudar se você puder explicar por que deseja o caminho completo.
Stuart
1
O que você quer dizer com URL completo ? Endereço do arquivo carregado?
gor 31/01
4
Para constar, o IE apenas fornece o bit "fakepath" porque eles não querem que servidores que "esperam" um caminho sejam interrompidos. Caso contrário, assim como outros navegadores, por razões de segurança, você receberá apenas o nome do arquivo (sem caminho). Mais importante, a menos que você tenha intenções maliciosas, não vejo por que conhecer o caminho fornece algo útil.
scunliffe
2
browser security issue~ Se o seu implementadas no navegador (com razão), então é altamente improvável que você pode contorná-la
Ross
13
Meu Deus, eu mantenho todos os meus arquivos C:\fakepath, então agora todo mundo conhece minha estrutura de diretórios.
Mbomb007

Respostas:

173

Alguns navegadores têm um recurso de segurança que impede o JavaScript de conhecer o caminho completo local do seu arquivo. Faz sentido - como cliente, você não deseja que o servidor conheça o sistema de arquivos da sua máquina local. Seria bom se todos os navegadores fizessem isso.

Joe Enos
fonte
9
Se o navegador não enviar o caminho do arquivo local, não há como descobrir.
Petteri Hietavirta 31/01
47
Basta postar o formulário: o navegador cuidará do upload. Seu site não precisa conhecer o caminho completo de volta para o cliente.
Rup
2
@ruffp Você só pode fazer upload com uma postagem, então você precisa colocar o upload em um formulário e enviá-lo. Isso ainda usará um controle de upload de arquivo padrão para escolher o arquivo e você ainda não precisará do nome do arquivo do cliente completo.
Rup 26/12
6
Duvido que exista algo malicioso que um site normal possa fazer na sua máquina local sem algum tipo de plug-in confiável, como Flash ou Java. É mais uma coisa de privacidade. Por exemplo, se você estiver fazendo o upload de seu desktop, você estaria deixando o servidor sabe seu nome de usuário em sua máquina local ou de domínio ( c:\users\myname\desktopou /Users/myname/Desktop/ou qualquer outro). Isso não é algo que um servidor web tenha conhecimento comercial.
Joe Enos
8
A privacidade quase sempre se refere à segurança e vulnerabilidade, pois as informações podem ser usadas contra alguém. Os ataques frequentemente exploram vários problemas para atingir seus objetivos. Qualquer pessoa que não reconheça os perigos não deve ter um código próximo ao Hello World sem outros workshops sobre como ser paranóico.
22613 Archimedix
70

Usar

document.getElementById("file-id").files[0].name; 

ao invés de

document.getElementById('file-id').value
Sardesh Sharma
fonte
16
No Chrome 44.0.2403.125, isso fornece apenas o nome do arquivo.
gap
4
Em seguida, use document.getElementById ("file-id"). Files [0] .path. Funciona bem para mim.
Loaderon
Obrigado @Loaderon, você deve postar isso como resposta!
7geeky
45

Eu uso o objeto FileReader no onchangeevento de entrada para o seu tipo de arquivo de entrada! Este exemplo usa a função readAsDataURL e, por esse motivo, você deve ter uma tag. O objeto FileReader também possui readAsBinaryString para obter os dados binários, que podem ser usados ​​posteriormente para criar o mesmo arquivo no servidor

Exemplo:

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}
chakroun yesser
fonte
Alguma idéia de por que nem isso está funcionando no host local? a fonte fica definido como src = "C: \ fakepath \ filename.jpg" mas console.logging o elemento imagem diz o src é um DataURL
galki
resposta: renderização do backbone: /
galki
1
Você não tem idéia de quanta frustração esta entrada salvou. É um diamante em bruto ... apenas 12 votos, mas merece muito mais. Ainda bem que olhei mais para baixo porque as outras entradas com votos muito mais altos não estavam funcionando e também FormData () não funcionará para nossos propósitos. Bem feito!
usar o seguinte comando
9
A pergunta está pedindo o caminho do arquivo, não o conteúdo do arquivo.
Quentin
@ Quentin: sim, você está certo, mas claramente a intenção do OP é, de alguma forma, talvez fazer upload do arquivo para o servidor. Portanto, essa solução funcionaria certamente é muito útil para todas as pessoas que procuram uma maneira de fazer upload de arquivos para um servidor usando JS.
user18490
36

Se você acessa o Internet Explorer, Ferramentas, Opção da Internet, Segurança, Personalizado, encontre o "Incluir caminho do diretório local ao fazer upload de arquivos para um servidor" (é bastante simples) e clique em "Ativar". Isso vai funcionar

saikiran1043
fonte
2
Existe algo semelhante ao Chrome?
Zaven Zareyan 27/10/19
11

Estou feliz que os navegadores tenham o cuidado de nos salvar de scripts intrusivos e similares. Não estou feliz com o IE colocando algo no navegador que faz uma simples correção de estilo parecer um ataque de hacker!

Usei um <span> para representar a entrada do arquivo, para que eu pudesse aplicar o estilo apropriado ao <div> em vez do <input> (mais uma vez, por causa do IE). Agora, devido a isso, o IE quer mostrar ao usuário um caminho com um valor garantido para colocá-lo em guarda e no mínimo apreensivo (se não totalmente assustá-lo?!) ... MAIS IE-CRAP!

De qualquer forma, graças a quem postou a explicação aqui: IE Browser Security: anexando "fakepath" ao caminho do arquivo na entrada [type = "file"] , reuni um pequeno fixador-superior ...

O código abaixo faz duas coisas - ele corrige um bug do lte IE8 em que o evento onChange não é acionado até o campo OnBlur do upload e atualiza um elemento com um caminho de arquivo limpo que não assusta o usuário.

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $('input[type="file"]');
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement('span')).addClass('file-underlay')
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword 'this' changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings('.file-underlay');
                    // check for IE's lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\\fakepath\\/i, '');
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);
Anand Sharma
fonte
Observe que isso não funciona no IE; Substituí o seguinte: filePath.substring (filePath.lastIndexOf ('\\') + 1, filePath.length)
Bassel Kh
6

Eu vim através do mesmo problema. No IE8, isso poderia ser contornado, criando uma entrada oculta após o controle de entrada do arquivo. Preencha com o valor do irmão anterior. No IE9, isso também foi corrigido.

Minha razão para querer conhecer o caminho completo foi criar uma visualização da imagem em javascript antes do upload. Agora tenho que carregar o arquivo para criar uma visualização da imagem selecionada.

Telefoontoestel
fonte
1
Se alguém quiser ver uma imagem antes do upload, poderá vê-la no computador.
Mbomb007 06/07/19
4

Se você realmente precisar enviar o caminho completo do arquivo codificado, provavelmente precisará usar algo como um applet java assinado, pois não há como obter essas informações se o navegador não as enviar.

jcoder
fonte
como caminho completo do caminho original <input type = "file" accept = ".jpeg, .jpg, .png"> .i obtendo o caminho falso, como alterá-lo novamente
Govind Sharma
1

Use leitores de arquivos:

$(document).ready(function() {
        $("#input-file").change(function() {
            var length = this.files.length;
            if (!length) {
                return false;
            }
            useImage(this);
        });
    });

    // Creating the function
    function useImage(img) {
        var file = img.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg", "image/png", "image/jpg"];
        if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
            alert("Invalid File Extension");
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(img.files[0]);
        }

        function imageIsLoaded(e) {
            $('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });

        }
    }
Marcos Di Paolo
fonte
-1

Olá, no meu caso, eu estou usando o ambiente de desenvolvimento asp.net, então eu queria fazer o upload desses dados na solicitação assíncrona ajax, em [webMethod] você não pode capturar o carregador de arquivos, pois não é um elemento estático, então tive que faça uma rotatividade para essa solução, corrigindo o caminho, depois converta a imagem desejada em bytes para salvá-la no banco de dados.

Aqui está a minha função javascript, espero que ajude você:

function FixPath(Path)
         {
             var HiddenPath = Path.toString();
             alert(HiddenPath.indexOf("FakePath"));

             if (HiddenPath.indexOf("FakePath") > 1)
             {
                 var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
                 MainStringLength = HiddenPath.length - UnwantedLength;
                 var thisArray =[];
                 var i = 0;
                 var FinalString= "";
                 while (i < MainStringLength)
                 {
                     thisArray[i] = HiddenPath[UnwantedLength + i + 1];
                     i++;
                 }
                 var j = 0;
                 while (j < MainStringLength-1)
                 {
                     if (thisArray[j] != ",")
                     {
                         FinalString += thisArray[j];
                     }
                     j++;
                 }
                 FinalString = "~" + FinalString;
                 alert(FinalString);
                 return FinalString;
             }
             else
             {
                 return HiddenPath;
             }
         }

aqui apenas para teste:

 $(document).ready(function () {
             FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
         });
// this will give you : ~/EnsaLmadiLiYghiz
Shiva Brahma
fonte
-3

Complementando a resposta de Sardesh Sharma, use:

document.getElementById("file-id").files[0].path

Para o caminho completo.

Loaderon
fonte
Isso retorna undefinedpara mim no FireFox 75.0. Existe pathrealmente? Você tem alguma referência à documentação sobre isso?
Jose Manuel Abarca Rodríguez
1
Oi! Postei essa resposta depois de tentar resolver o problema sozinho e ter sucesso usando o caminho. Não me lembro em qual projeto estava tentando isso, mas sempre uso o Google Chrome, talvez essa solução seja adequada apenas para esse navegador. E pode até se tornar obsoleto devido a atualizações do navegador. Desculpe por não poder ajudar mais: /
Loaderon 24/04