una - metadatos html ejemplos

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

Question

Tenemos un formulario HTML simple con <input type="file"> , como se muestra a continuación:

<form>
  <label for="attachment">Attachment:</label>
  <input type="file" name="attachment" id="attachment">
  <input type="submit">
</form>

En IE7 (y probablemente todos los navegadores famosos, incluido el viejo Firefox 2), si enviamos un archivo como ''// server1 / path / to / file / filename'', funciona correctamente y proporciona la ruta completa al archivo y al nombre del archivo.

En Firefox 3, solo devuelve ''nombre de archivo'', debido a su nueva ''función de seguridad'' para truncar la ruta, como se explica en el sistema de seguimiento de errores de Firefox ( https://bugzilla.mozilla.org/show_bug.cgi?id=143220 )

No tengo ni idea de cómo superar esta ''nueva característica'' porque hace que todos los formularios de carga en mi aplicación web dejen de funcionar en Firefox 3.

¿Alguien puede ayudarme a encontrar una solución única para obtener la ruta del archivo tanto en Firefox 3 como en IE7?

Answer 1

En IE7 (y probablemente todos los navegadores famosos, incluido el viejo Firefox 2), si enviamos un archivo como ''// server1 / path / to / file / filename'', funciona correctamente y proporciona la ruta completa al archivo y al nombre del archivo.

No tengo ni idea de cómo superar esta ''nueva característica'' porque hace que todos los formularios de carga en mi aplicación web dejen de funcionar en Firefox 3.

Hay un gran malentendido aquí. ¿Por qué alguna vez necesita la ruta completa del archivo en el lado del servidor? Imagine que soy el cliente y tengo un archivo en C:/path/to/passwords.txt y le doy la ruta completa del archivo. ¿Cómo podría ser un servidor alguna vez obtener sus contenidos ? ¿Tiene una conexión TCP abierta a mi sistema de archivos de disco local? ¿Has probado la funcionalidad de carga de archivos cuando traes tu aplicación web a producción en una máquina servidor diferente?

Solo funcionará cuando el cliente y el servidor se ejecuten físicamente en la misma máquina, porque entonces tendrá acceso al mismo sistema de archivos del disco duro. Esto solo ocurrirá cuando desarrolle localmente su sitio web y, por tanto, tanto el navegador web (cliente) como el servidor web (servidor) coinciden en la misma máquina.

Que la ruta completa del archivo se envíe en MSIE y otros navegadores web antiguos se debe a un error de seguridad . Las especificaciones W3 y RFC2388 nunca han mencionado incluir la ruta completa del archivo. Solo el nombre del archivo. Firefox está haciendo su trabajo correctamente.

Para manejar los archivos cargados, no necesita conocer la ruta completa del archivo. Debería interesarse en el contenido completo del archivo que el cliente ya ha enviado al servidor en el cuerpo de la solicitud en caso de una solicitud multipart/form-data . Cambie su formulario para que se parezca a lo siguiente como se indica en RFC2388:

<form action="upload-script-url" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>

La forma de obtener los contenidos del archivo cargado en el servidor depende del lenguaje de programación del lado del servidor que esté utilizando.

• Java / JSP : le gustaría usar HttpServletRequest#getPart() o Apache Commons FileUpload API para analizarlo. Debería terminar con un InputStream con el contenido del archivo que a su vez puede escribir en cualquier OutputStream a su gusto. Puedes encontrar un ejemplo en esta respuesta .

• Java / JSF : le gustaría usar el componente <h:inputFile> o cualquier otro componente de carga de archivos proporcionado por la biblioteca de componentes que está utilizando. También aquí, desea obtener el contenido del archivo en el sabor de un InputStream . Vea esta respuesta para un ejemplo.

• PHP : el contenido del archivo ya está almacenado implícitamente en el disco temporal. Le gustaría usar la función move_uploaded_file() para moverlo a la ubicación deseada. Ver también el manual de PHP .

• ASP.NET : no tengo una respuesta detallada, ya que no lo hago, pero Google encontró algunos ejemplos para mí: ejemplo de ASP.NET , ejemplo de ASP.NET 2.0

Siempre que desee obtener el nombre del archivo como parte del archivo cargado, debe recortar la ruta completa desde el nombre del archivo. Esta información es completamente irrelevante para usted. Ver también, por ejemplo, esta entrada de FAQ de Apache Commons FileUpload

¿Por qué FileItem.getName () devuelve la ruta completa, y no solo el nombre del archivo?

Internet Explorer proporciona la ruta completa al archivo cargado y no solo al nombre del archivo base. Dado que FileUpload proporciona exactamente lo que fue proporcionado por el cliente (navegador), es posible que desee eliminar esta información de ruta en su aplicación.

Answer 2

Eche un vistazo a XPCOM , podría haber algo que pueda usar si Firefox 3 es utilizado por un cliente.

Answer 3

En realidad, justo antes de que FF3 estuviera fuera, hice algunos experimentos, y FF2 solo envía el nombre de archivo, como hizo Opera 9.0. Solo IE envía la ruta completa. El comportamiento tiene sentido, porque el servidor no tiene que saber dónde guarda el usuario el archivo en su computadora, es irrelevante para el proceso de carga. ¡A menos que esté escribiendo una aplicación de intranet y obtenga el archivo por acceso directo a la red!

Lo que ha cambiado (y ese es el verdadero punto del error al que apunta) es que FF3 ya no permite el acceso a la ruta del archivo desde JavaScript. Y no dejaré que escriba / pegue una ruta allí, lo cual es más molesto para mí: tengo una extensión de shell que copia la ruta de un archivo desde el Explorador de Windows al portapapeles y lo usé mucho en esa forma. Resolví el problema usando la extensión DragDropUpload. Pero esto se convierte en fuera de tema, me temo.

Me pregunto qué harán sus formularios web para dejar de trabajar con este nuevo comportamiento.

[EDITAR] Después de leer la página enlazada por Mike, veo, de hecho, los usos de intranet de la ruta (identificar a un usuario, por ejemplo) y los usos locales (mostrar vista previa de una imagen, administración local de archivos). El usuario Jam-es parece proporcionar una solución con nsIDOMFile (aún no probado).

Answer 4

Esta es una solución / solución alternativa ... En FF3, puede recuperar la ruta completa del archivo en un cuadro de texto en lugar del cuadro de búsqueda de archivos. Y eso también ... ¡Arrastrando / soltando el archivo!

Puede arrastrar y soltar su archivo en un cuadro de texto en su página html. y mostrará la ruta completa del archivo. Esta información puede transferirse fácilmente a su servidor o manipularla.

Todo lo que tienes que hacer es usar la extensión DragDropUpload

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

Esta extensión lo ayudará a arrastrar y soltar archivos en el cuadro Explorar archivos (archivo de entrada). Pero aún así no podrá obtener el archivo completo, si intenta recuperarlo.

Entonces, modifiqué un poco esta extensión. De la forma en que puedo arrastrar, coloque un archivo en cualquier casilla de "Entrada de texto" y obtenga la ruta completa del archivo. Y así puedo obtener la ruta completa del archivo en FF3 Firefox 3.

Answer 5

Este es un ejemplo que podría funcionar para usted si lo que necesita no es exactamente la ruta, sino una referencia al archivo que funciona sin conexión.

http://www.ab-d.fr/date/2008-07-12/

Está en francés, pero el código es javascript :)

Estas son las referencias a las que hace referencia el artículo: http://developer.mozilla.org/en/nsIDOMFile http://developer.mozilla.org/en/nsIDOMFileList

Answer 6

No podemos obtener la ruta completa del archivo en FF3. Lo siguiente puede ser útil para la personalización del componente Archivo.

<script>

function setFileName()
{
    var file1=document.forms[0].firstAttachmentFileName.value; 

    initFileUploads(''firstFile1'',''fileinputs1'',file1);
    }
function initFileUploads(fileName,fileinputs,fileValue) {
    var fakeFileUpload = document.createElement(''div'');
    fakeFileUpload.className = ''fakefile'';
    var filename = document.createElement(''input'');
    filename.type=''text'';
    filename.value=fileValue;
    filename.id=fileName;
    filename.title=''Title'';
    fakeFileUpload.appendChild(filename);
    var image = document.createElement(''input'');
    image.type=''button'';
    image.value=''Browse File'';
    image.size=5100;
    image.style.border=0;
    fakeFileUpload.appendChild(image);
    var x = document.getElementsByTagName(''input'');
    for (var i=0; i&lt;x.length;i++) {
        if (x[i].type != ''file'') continue;
        if (x[i].parentNode.className != fileinputs) continue;
        x[i].className = ''file hidden'';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName(''input'')[0];
        x[i].onchange= function () {
            this.relatedElement.value = this.value;
        }}
    if(document.forms[0].firstFile != null && document.getElementById(''firstFile1'') != null)
    {
    document.getElementById(''firstFile1'').value= document.forms[0].firstFile.value;
    document.forms[0].firstAttachmentFileName.title=document.forms[0].firstFile.value;
    }
}

function submitFile()
{
alert( document.forms[0].firstAttachmentFileName.value);
}
</script>
<style>div.fileinputs1 {position: relative;}div.fileinputs2 {position: relative;}
div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}
input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);
    opacity: 0;z-index: 2;}</style>

<html>
<body onLoad ="setFileName();">
<form>
<div class="fileinputs1">
<INPUT TYPE=file NAME="firstAttachmentFileName" styleClass="file" />
</div>
<INPUT type="button" value="submit" onclick="submitFile();" />
</form>
</body>
</html>

Answer 7

Para la vista previa en Firefox funciona esto: el archivo adjunto es el objeto del elemento de archivo adjunto en el primer ejemplo:

           if (attachment.files)
             previewImage.src = attachment.files.item(0).getAsDataURL();
           else
             previewImage.src = attachment.value;

Answer 8

Simplemente no puedes hacerlo con FF3.

La otra opción podría ser el uso de applet u otros controles para seleccionar y cargar archivos.

Answer 9

Una forma extremadamente desagradable de resolver esto es hacer que el usuario escriba manualmente el directorio en un cuadro de texto y vuelva a agregarlo al principio del valor del archivo en JavaScript.

Desordenado ... pero depende del nivel de usuario con el que está trabajando y soluciona el problema de seguridad.

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

JavaScript

var str = document.getElementById(''file_path'').value;
var str = str + document.getElementById(''file_name'').value;