nombre - ¿Cómo obtener la ruta completa del archivo seleccionado en el cambio de<input type=''file''> usando javascript, jquery-ajax?

obtener ruta de input file jquery

Question

Cómo obtener la ruta completa del archivo al seleccionar el archivo usando <input type=''file''>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $(''input[type=file]'').change(function () {
         var filePath=$(''#fileUpload'').val(); 
     });
}
</script>

pero la var filePath contiene only name del archivo seleccionado, no la full path .
Lo busqué en la red, pero parece que por razones de seguridad los navegadores (FF, Chrome) solo dan el nombre del archivo.
¿Hay alguna otra forma de obtener la ruta completa del archivo seleccionado?

Answer 1

¿Te refieres a esto?

$(''#i_file'').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr(''src'',tmppath);       
});

Answer 2

No puede hacerlo; el navegador no permitirá esto debido a problemas de seguridad.

Cuando se selecciona un archivo utilizando el tipo de entrada = objeto de archivo, el valor de la propiedad de valor depende del valor de la configuración de seguridad "Incluir ruta de directorio local al cargar archivos en un servidor" para la zona de seguridad utilizada para mostrar la página web que contiene el objeto de entrada.

El nombre de archivo completo del archivo seleccionado se devuelve solo cuando esta configuración está habilitada. Cuando la configuración está deshabilitada, Internet Explorer 8 reemplaza la unidad local y la ruta del directorio con la cadena C: / fakepath / para evitar la divulgación de información inapropiada.

Y otra

Te perdiste ); esto al final de la función de evento de cambio.

Además, no cree la función para el evento de cambio, simplemente utilícela como se indica a continuación,

<script type="text/javascript">

    $(function()
    {
        $(''#fileUpload'').on(''change'',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

Answer 3

No puedes. La seguridad lo detiene por saber algo sobre el sistema de archivo de la computadora del cliente, ¡puede que ni siquiera tenga uno! Podría ser un MAC, una PC, una tableta o un refrigerador habilitado para Internet; usted no sabe, no puede saber y no lo sabrá. Y dejar que tenga la ruta completa podría darle cierta información sobre el cliente, especialmente si es una unidad de red, por ejemplo.

De hecho, puede obtenerlo en determinadas condiciones, pero requiere un control ActiveX y no funcionará en el 99,99% de las circunstancias.

No puede utilizarlo para restaurar el archivo a la ubicación original de todos modos (ya que no tiene absolutamente ningún control sobre dónde se almacenan las descargas, o incluso si están almacenadas), de modo que, en la práctica, no le resulta muy útil.

Answer 4

Por razones de seguridad, los navegadores no permiten esto, es decir, JavaScript en el navegador no tiene acceso al Sistema de archivos; sin embargo, usando la API de archivos HTML5, solo Firefox proporciona una propiedad mozFullPath , pero si intenta obtener el valor, devuelve una cadena vacía:

$(''input[type=file]'').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

Así que no pierdas tu tiempo.

editar: si necesita la ruta del archivo para leer un archivo, puede usar la API de FileReader . Aquí hay una pregunta relacionada sobre SO: Vista previa de una imagen antes de que se cargue.

Answer 5

Prueba esto:

Le dará una ruta temporal, no la ruta correcta, puede usar esta secuencia de comandos si desea mostrar las imágenes seleccionadas como en este ejemplo de jsfiddle (Pruébelo seleccionando imágenes y otros archivos):

JSFIDDLE

Aquí está el código:

HTML: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS: -

$(''#i_file'').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr(''src'',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

No es exactamente lo que estabas buscando, pero puede ser que pueda ayudarte en alguna parte.

Answer 6

Puede usar el siguiente código para obtener una URL local que funcione para el archivo cargado:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log(''path'', path);
</script>

Answer 7

Puedes, si subir una carpeta entera es una opción para ti

<input type="file" webkitdirectory directory multiple/>

evento de cambio contendrá:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

Answer 8

elemento de archivo tiene y los files llamadas de matriz contiene todo lo necesario que necesita

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

Answer 9

nunca deberías hacerlo ... y creo que intentarlo en los últimos navegadores es inútil (por lo que sé) ... todos los últimos navegadores, por otro lado, no permitirán esto ...

algunos otros enlaces que puede visitar, para encontrar una solución alternativa como obtener el valor del lado del servidor, pero no en el lado del cliente (javascript)

Ruta completa desde la entrada del archivo usando jQuery
Cómo obtener la ruta del archivo desde el formulario de entrada HTML en Firefox 3