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


240

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 el only namearchivo seleccionado, no el 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?




@nauphal gracias por comentar, pero ¿hay alguna otra forma de obtener la ruta completa del archivo seleccionado?
Yogesh Pingle

1
Si se encuentra en el caso en el que desea obtener la ruta de un archivo en el servidor (por ejemplo, creando una interfaz web para una utilidad de línea de comandos para que se ejecute en el servidor), siempre puede construir la ruta relativa, enviarla como <opción> sy utilice un widget de árbol o escriba con anticipación para permitir que el usuario lo seleccione y luego haga que el servidor procese el archivo.
Dardenfall

Respuestas:


164

Por razones de seguridad, los navegadores no permiten esto, es decir, JavaScript en el navegador no tiene acceso al Sistema de archivos, sin embargo, al usar la API de archivos HTML5, solo Firefox proporciona una mozFullPathpropiedad, 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 FileReader en su lugar. Aquí hay una pregunta relacionada sobre SO: Vista previa de una imagen antes de que se cargue.


1
Vea este enlace ya que me ayudó con el mismo problema.
Amir Tugi

... El título de la pregunta vinculada es: Vista previa de una imagen antes de cargarla .
indefinido

Y sin embargo, me dio la URL de la ruta para enviar al servidor
Amir Tugi

1
@AmirTugi Esa solución lee un archivo. No tiene nada que ver con la ruta del archivo en el sistema de archivos del usuario.
indefinido

Entonces, ¿cómo podría hacerlo este sitio web?
SaidbakR

102

Prueba esto:

Le dará una ruta temporal, no la ruta precisa, puede usar esta secuencia de comandos si desea mostrar las imágenes seleccionadas como en este ejemplo 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 estaba buscando, pero puede ser que pueda ayudarlo en alguna parte.


¿Hay alguna manera de hacer esto con otros tipos de archivos: pdf, docx, etc. y en lugar de la imagen, muestra un icono? Para mis usos, quiero almacenar los archivos en la página antes de enviarlos, lo que le da al usuario la oportunidad de agregar un comentario para cargarlo como un mensaje con un texto.
user1040975

¿Solo necesito poner el contenido de "tmppath" en la barra de direcciones del navegador? Lo intenté y no funciona.
MacGruber

@GangsarSwaPurba Desafortunadamente, no funciona en IE9 - vea URL.createObjectURL () .
naXa

@naXa bien, editaré mi comentario arriba. uw, desafortunadamente no puedo editar mi comentario
Gangsar Swapurba

2
En la tercera línea, debe usar la variable tmppath en lugar de URL.createObjectURL (event.target.files [0]), esto está más optimizado.
Wessam El Mahdy

17

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

Cuando se selecciona un archivo utilizando el objeto input type = file, el valor de la propiedad value 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 inapropiada de información.

Y otra

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

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

<script type="text/javascript">

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

</script>

19
Intenté tu código pero me está dando un camino equivocado. mi archivo está en el Ddirectorio pero el valor está llegandoC:\fakepath\test.xls
Rahul Munjal

3
C: \ fakepath \ fileName.xls ... ¿alguien sabe cómo resolver esto?
André Dos Santos

14

No puedes La seguridad lo detiene por saber algo sobre el sistema de archivo de la computadora cliente, ¡es posible que ni siquiera tenga uno! Puede ser un MAC, una PC, una tableta o un refrigerador con acceso a Internet; no lo sabe, no puede saberlo y no lo sabrá. Y permitirle tener la ruta completa podría brindarle información sobre el cliente, especialmente si se trata de una unidad de red, por ejemplo.

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

De todos modos, no puede usarlo para restaurar el archivo a la ubicación original (ya que no tiene absolutamente ningún control sobre dónde se almacenan las descargas, o incluso si están almacenadas), por lo que en la práctica no le sirve de mucho de todos modos.


11

¿Te refieres a esto?

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

44
Esto no da ruta al archivo. ¿Por qué votaron tantas veces?
FlowUI. SimpleUITesting.com

7

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>


1

Puede, si cargar una carpeta completa es una opción para usted

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

El evento de cambio contendrá:

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

1

nunca deberías hacerlo ... y creo que probarlo 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 atravesar para encontrar una solución alternativa, como obtener el valor en el 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


-1

El elemento de archivo tiene y la llamada de matriz filescontiene todo lo necesario

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

2
No proporciona la ruta completa del archivo cargado.
Sergiu Mare

-3

Puede obtener la ruta completa del archivo seleccionado para cargar solo con IE11 y MS Edge.

var fullPath = Request.Form.Files["myFile"].FileName;
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.