Obtener objeto "File" desde un campo de tipo "file" de un formulario en IE

GROGUI2 · #1 (**permalink**) 29/04/2012, 10:41

Hola,

necesito obtener un objeto de tipo File a partir de un campo de un formulario de tipo file.

El siguiente código me funciona en todos los navegadores menos en IE

Código:

	
var files = new Array();
var nFiles = 0;
$.each($(this).find("#ficheros").find('input'),
function(j, fileInput)
{	
							
         for (var i = 0; i < fileInput.files.length; i++) 
	{
		files[nFiles] = fileInput.files[i];
		nFiles++;
	}
}
);

El problema es que en IE no reconoce la propiedad files del campo del formulario.
¿Cómo puedo obtener el objeto File en IE?
Gracias

emprear · #2 (**permalink**) 29/04/2012, 11:58

IE y Opera no soportan File, podés usar el valor de value para obtener el path

Ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
    <script type="text/javascript">
        function infoArchivo() {
            var fileInput = document.getElementById ("subir");
 
            var mensajes = "";
            if ('files' in fileInput) {
                if (fileInput.files.length == 0) {
                    mensajes = "Seleccione sus archivos<br />Use Ctrl para selecciones múltiples(firefox/chrome/Safari)..";
                } else {
                    for (var i = 0; i < fileInput.files.length; i++) {
                        mensajes += "<br /><b>" + (i+1) + ". seleccionado</b><br />";
                        var file = fileInput.files[i];
                        if ('name' in file) {
                            mensajes += "nombre: " + file.name + "<br />";
                        }
                        else {
                            mensajes += "nombre: " + file.fileName + "<br />";
                        }
                        if ('size' in file) {
                            mensajes += "tamaño: " + file.size + " bytes <br />";
                        }
                        else {
                            mensajes += "tamaño: " + file.fileSize + " bytes <br />";
                        }
                        if ('mediaType' in file) {
                            mensajes += "tipo: " + file.mediaType + "<br />";
                        }
                    }
                }
            } 
            else {
                if (fileInput.value == "") {
                    mensajes += "Seleccione uno o más archivos.";
                    mensajes += "<br />Use Ctrl para selecciones múltiples(firefox/chrome/Safari).";
                }
                else {
                    mensajes += "El navegador no soporta el objeto File";
                    mensajes += "<br />La ruta al archivo seleccionado es: " + fileInput.value;
                }
            }
 
            var info = document.getElementById ("info");
            info.innerHTML = mensajes;
        }
    </script>
</head>
<body onload="infoArchivo()">
    <input type="file" id="subir" multiple="multiple" size="60" onchange="infoArchivo()" />
    <div id="info" style="margin-top:30px"></div>
</body>
</html>

Saludos

GROGUI2 · #3 (**permalink**) 29/04/2012, 12:21

En ese ejemplo solo se muestran las propiedades del fichero seleccionado pero si quiero enviar el archivo mediante una petición AJAX, ¿como podría adjuntarlo al formulario?

Necesito enviar el fichero, está claro que con un submit normal del formulario se enviaría, pero necesito hacer la petición mediante ajax :S

Gracias

emprear · #4 (**permalink**) 29/04/2012, 12:54

Si el objeto es subir un archivo sin recargar la página, podés hacer esto
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ (plugin de jquery)
ó esto (bastante más simple utilizando un iframe oculto, de ajax no tiene nada)
http://www.ajaxf1.com/product/ajax-file-upload.html

SAludos

GROGUI2 · #5 (**permalink**) 29/04/2012, 13:07

Había visto que existían plug-ins pero no prefería utilizar jquery nativo si se pudiera.

Le echaré un ojo a eso para hacerlo.

Muchas Gracias!

emprear · #6 (**permalink**) 29/04/2012, 14:01

como estás usando cosas como
$.each($(this).find("#ficheros").find('input'),

...
Saludos

GROGUI2 · #7 (**permalink**) 29/04/2012, 14:42

¿Es una pregunta?

Es que tengo un dialogo jquery ui en el que el usuario puede añadir mas campos de selección de archivos dinámicamente al formulario, y todos se añaden con el mismo código. De ese modo proceso todos los campos que el usuario haya ido creando y subo todos los ficheros a la vez.

Un saludo