¿Cómo resolver el C: \ fakepath?

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

Este es mi botón de carga.

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

Este es el campo de texto donde tengo que mostrar la ruta completa del archivo.

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

Este es el JavaScript que resuelve mi problema. Pero en el valor de alerta me da

C:\fakepath\test.csv 

y Mozilla me da:

test.csv

Pero quiero la ruta local del archivo totalmente calificado . Cómo resolver este problema?

Si esto se debe a un problema de seguridad del navegador, ¿cuál debería ser la forma alternativa de hacerlo?

Algunos navegadores tienen una función de seguridad que evita que JavaScript conozca la ruta completa local de su archivo. Tiene sentido: como cliente, no desea que el servidor conozca el sistema de archivos de su máquina local. Sería bueno si todos los navegadores hicieran esto.

Utilizar

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

en vez de

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

¡Utilizo el objeto FileReader en el onchangeevento de entrada para su tipo de archivo de entrada! Este ejemplo utiliza la función readAsDataURL y, por esa razón, debe tener una etiqueta. El objeto FileReader también tiene readAsBinaryString para obtener los datos binarios, que luego se pueden usar para crear el mismo archivo en su servidor

Ejemplo:

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

Si va a Internet Explorer, Herramientas, Opciones de Internet, Seguridad, Personalizado, busque "Incluir ruta de directorio local al cargar archivos en un servidor" (está bastante abajo) y haga clic en "Activar". Esto funcionará

Estoy feliz de que los navegadores se preocupen por salvarnos de secuencias de comandos intrusivas y similares. ¡No estoy contento con que IE ponga algo en el navegador que hace que una solución de estilo simple parezca un ataque de pirateo!

He usado un <span> para representar la entrada del archivo para poder aplicar el estilo apropiado a la <div> en lugar de la <input> (una vez más, debido a IE). Ahora, debido a esto, IE quiere mostrarle al Usuario una ruta con un valor que garantice que los pondrá en guardia y, al menos, temerosos (¡¿si no los asusta por completo?!) ... ¡MÁS IE-CRAP!

De todos modos, gracias a quienes publicaron la explicación aquí: Seguridad del navegador IE: agregando "fakepath" a la ruta del archivo en la entrada [type = "file"] , he reunido un reparador menor superior ...

El siguiente código hace dos cosas: corrige un error lte IE8 donde el evento onChange no se activa hasta que el campo de carga onBlur y actualiza un elemento con una ruta de archivo limpia que no asustará al Usuario.

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

Encontré el mismo problema. En IE8, podría solucionarse creando una entrada oculta después del control de entrada del archivo. El llene esto con el valor de su hermano anterior. En IE9 esto también se ha solucionado.

Mi razón para querer conocer la ruta completa fue crear una vista previa de la imagen de JavaScript antes de cargarla. Ahora tengo que cargar el archivo para crear una vista previa de la imagen seleccionada.

Si realmente necesita enviar la ruta completa del archivo subido, entonces probablemente tenga que usar algo como un applet de Java firmado ya que no hay ninguna forma de obtener esta información si el navegador no la envía.

parece que no puedes encontrar la ruta completa en tu localhost por js, pero puedes ocultar la ruta falsa para mostrar el nombre del archivo. Use jQuery para obtener el nombre de archivo seleccionado de la entrada del archivo sin la ruta

Usar lectores de archivos:

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

        }
    }

Ahí, en mi caso, estoy usando el entorno de desarrollo asp.net, así que quería cargar esos datos en una solicitud asíncrona ajax, en [webMethod] no puede atrapar el cargador de archivos ya que no es un elemento estático, así que tuve que realice una rotación para dicha solución arreglando la ruta, que convierta la imagen deseada en bytes para guardarla en DB.

Aquí está mi función de JavaScript, espero que te ayude:

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

aquí solo para probar:

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

Complementando el uso de la respuesta de Sardesh Sharma:

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

Por camino completo.