Como resolver o caminho C: \ fake?

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

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.

Usar

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

ao invés de

document.getElementById('file-id').value

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

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

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

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.

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.

Parece que você não consegue encontrar o caminho completo em seu host local por js, mas pode ocultar o caminho falso para mostrar apenas o nome do arquivo. Use jQuery para obter o nome de arquivo selecionado da entrada do arquivo sem o caminho

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 + ")" });

        }
    }

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

Complementando a resposta de Sardesh Sharma, use:

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

Para o caminho completo.