¿Cómo resolver el C: \ fakepath?


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


41
Esta es la implementación de seguridad del navegador: el navegador lo protege de acceder a la estructura de su disco. Puede ser útil si puede explicar por qué quiere el camino completo.
Stuart

1
¿Qué quieres decir con url completa ? Dirección del archivo cargado?
gor

44
Para el registro, IE solo da el bit "fakepath" porque no querían servidores que "esperaban" que se rompiera una ruta. De lo contrario, al igual que otros navegadores por razones de seguridad, solo obtendrá el nombre de archivo (sin ruta). Más importante aún, a menos que tenga intenciones maliciosas, no puedo ver por qué conocer el camino proporciona algo útil.
scunliffe

2
browser security issue~ si está implementado en el navegador (con razón), es muy poco probable que pueda evitarlo
Ross

13
Dios mío, guardo todos mis archivos C:\fakepath, así que ahora todos conocen mi estructura de directorios.
mbomb007

Respuestas:


173

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.


99
Si el navegador no envía la ruta del archivo local, no hay forma de averiguarlo.
Petteri Hietavirta

47
Simplemente publique el formulario: el navegador se encargará de la carga. Su sitio web no necesita conocer la ruta completa de regreso al cliente.
Rup

2
@ruffp Solo puede cargar con una publicación, por lo que debe colocar la carga en un formulario y enviarla. Eso seguirá utilizando un control de carga de archivos estándar para elegir el archivo y aún no necesitará el nombre de archivo completo del cliente.
Rup

66
Dudo que haya algo malicioso que un sitio web normal pueda hacerle a su máquina local sin algún tipo de complemento confiable como Flash o Java. Es más una cuestión de privacidad. Por ejemplo, si va a subir desde su escritorio, estaría dejando que el servidor saber su nombre de usuario en su máquina local o de dominio ( c:\users\myname\desktopo /Users/myname/Desktop/, o lo que sea). Eso no es algo que un servidor web tenga que conocer.
Joe Enos

8
La privacidad casi siempre se relaciona con la seguridad y la vulnerabilidad, ya que la información se puede usar contra alguien. Los ataques con frecuencia explotan múltiples problemas para lograr sus objetivos. A cualquiera que no reconozca los peligros no se le debe permitir un código cercano a Hello World sin talleres adicionales sobre cómo ser paranoico.
Archimedix

70

Utilizar

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

en vez de

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

16
En Chrome 44.0.2403.125, esto solo le proporciona el nombre del archivo.
brecha

44
Luego use document.getElementById ("id-archivo"). Files [0] .path. Funciona bien para mi.
Loaderon

¡Gracias @Loaderon, deberías publicar esto como respuesta!
7geeky

45

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

¿Alguna idea de por qué incluso esto no funciona en localhost? la fuente se configura como src = "C: \ fakepath \ filename.jpg" pero console.logging el elemento de imagen dice que src es dataURL
galki

respuesta: backbone rerendering: /
galki

1
No tienes idea de cuánta frustración ha guardado esta entrada. Es un diamante en bruto ... solo 12 votos, pero merece mucho más. Me alegro de haber mirado más abajo porque las otras entradas con votos más altos no estaban funcionando y también FormData () no funcionará para nuestros propósitos. ¡Bien hecho!
user1585204

99
La pregunta es pedir la ruta del archivo , no el contenido del archivo.
Quentin

@Quentin: sí, tiene razón, pero está claro que la intención del OP es poder cargar de alguna manera el archivo al servidor. Por lo tanto, esta solución funcionaría es ciertamente muy útil para todas las personas que buscan una forma de cargar archivos a un servidor utilizando JS.
user18490

36

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á


2
¿Hay algo similar a Chrome?
Zaven Zareyan

11

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

Tenga en cuenta que esto no funciona en IE, por lo tanto; Reemplacé lo siguiente: filePath.substring (filePath.lastIndexOf ('\\') + 1, filePath.length)
Bassel Kh

6

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.


1
Si alguien quiere ver una imagen antes de subirla, puede verla en su computadora.
mbomb007

4

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.


cómo completar la ruta original <input type = "file" accept = ". jpeg, .jpg, .png">. Obtengo una ruta falsa, cómo volver a guardarla
Govind Sharma


1

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

        }
    }

-1

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

-3

Complementando el uso de la respuesta de Sardesh Sharma:

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

Por camino completo.


Esto vuelve undefineda mí en FireFox 75.0. ¿Existe pathrealmente? ¿Tiene alguna referencia a la documentación al respecto?
Jose Manuel Abarca Rodríguez

1
¡Hola! Publiqué esta respuesta después de tratar de resolver el problema yo mismo y tener éxito usando la ruta. No recuerdo en qué proyecto estaba intentando esto, pero siempre uso Google Chrome, tal vez esta solución solo sea adecuada para ese navegador. E incluso podría haberse vuelto obsoleto debido a las actualizaciones del navegador. Lamento no poder ayudar más: /
Loaderon
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.