javascript - chrome - ¿Cómo resolver el C: / fakepath?

fakepath jquery

Question

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

Este es mi botón de subir.

<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 del archivo local completamente 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?

Answer 1

¡Uso el objeto FileReader en el evento input onchange 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;
}

Answer 2

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.

Answer 3

Complementando el uso de la respuesta de Sardesh Sharma:

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

Para el camino completo.

Answer 4

Estoy feliz de que los navegadores se preocupen por salvarnos de scripts intrusivos y similares. No estoy contento de que IE haya puesto algo en el navegador que hace que una simple corrección de estilo parezca un ataque de hackeo.

He usado un <span> para representar la entrada del archivo para poder aplicar el estilo apropiado a <div> en lugar de <input> (una vez más, debido a IE). Ahora, debido a este IE, queremos mostrarle al usuario una ruta con un valor que garantice ponerlo en guardia y en lo mínimo aprensivo (¡¿si no asustarlo totalmente ?!) ... ¡MÁS IE-CRAP!

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

El siguiente código hace dos cosas: corrige un error en lte IE8 donde el evento onChange no se activa hasta que onBlur del campo de carga 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);

Answer 5

Hy, en mi caso, estoy usando el entorno de desarrollo asp.net, así que quise cargar esos datos en una solicitud asynchronus ajax, en [webMethod] no puede capturar el cargador de archivos ya que no es un elemento estático, así que tuve que Haga una rotación de dicha solución arreglando la ruta, que convierta la imagen deseada en bytes para guardarla en la base de datos.

Aquí está mi función 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 la prueba:

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

Answer 6

Me encontré con el mismo problema. En IE8 se podría solucionar creando un ingreso oculto después del control de entrada del archivo. Rellene 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 era crear una vista previa de la imagen de javascript antes de subirla. Ahora tengo que cargar el archivo para crear una vista previa de la imagen seleccionada.

Answer 7

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

Answer 8

Si realmente necesita enviar la ruta completa del archivo uploded, es probable que 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.

Answer 9

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

Answer 10

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

        }
    }

Answer 11

Utilizar

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

en lugar de

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