Cómo resolver el C: \ fakepath?

Question

<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 que el local de ruta del archivo completo. 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

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

Answer 2

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

Answer 3

Me encontré con el mismo problema. En IE8 podría solucionarse creando una entrada oculta después del control de entrada de archivos. Llena 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 cargarla. Ahora tengo que subir el archivo para crear una vista previa de la imagen seleccionada.

Answer 4

Si va a Internet Explorer, Herramientas, Opciones de Internet, Seguridad, Personalizar, busque la "Incluir ruta del directorio local Al cargar archivos a un servidor" (es bastante baja) y haga clic en "Habilitar". Esto funcionará

Answer 5

Me alegra que los navegadores se preocupen por salvarnos de scripts intrusivos y cosas por el estilo. No estoy contento con que IE ponga algo en el navegador que hace que un simple arreglo de estilo parezca un ataque de hackeo.

He usado un lapso <> para representar el archivo de entrada de modo que pudiera aplicar un estilo apropiado a la < div> en lugar de la entrada <> (una vez más, a causa de IE). Ahora, debido a esto, IE quiere mostrarle al usuario una ruta con un valor que simplemente garantiza ponerlos en guardia y por lo menos aprensivo (¡si no los aíslas totalmente!) ... MÁS IE-CRAP!

De todos modos, gracias a que los que publican la explicación aquí: IE Browser Security: Appending "fakepath" to file path in input[type="file"], he juntado un menor que necesita reparaciones ...

El código siguiente hace dos cosas - que corrige un error por el que LTE IE8 la El evento onChange no se activa hasta que el campo de carga esté enBlur y actualiza un elemento con un archivo limpio 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 6

uso el FileReader objeto en el evento de entrada onchange para su entrada de tipo de archivo! Este ejemplo usa la función readAsDataURL y por esa razón debe tener una etiqueta. El objeto FileReader también ha readAsBinaryString para obtener los datos binarios, que luego puede usarse para crear el mismo archivo en el 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 7

parece que no puede encontrar la ruta completa en la que localhost por js, pero puede ocultar el camino falso para mostrar el nombre del archivo. Use jQuery to get the file input's selected filename without the path

Answer 8

Uso

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

en lugar de

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