[SOLUCIONADO] subir archivo con form data

[WorseMzg]

buenas a todos,

mi problema es el siguiente

tengo un formulario simple

Código HTML:

<form id="formNuevoBoletin" method="post" action="includes/processNew.php" enctype="multipart/form-data" >
	
		
		<label>Titulo del Boletin:</label></td>
		<input type="text" name="titulo"></td>	
		

	
		<label>Selecciona el Archivo:</label></td>
		<input type="file" name="archivo"></td>
		
		
	
		<input type="hidden" name="tipo" value="<?php echo $tipo ?>">
		<input type="button" onclick="subir('boletin')" value="Subir"></td>
</form> 

ahora al momento de pasar por la funcion .... el error illegal invocation

el script es este

Código:

function subir(tipo){
	if (tipo=="boletin"){
		var formData = new FormData("#formNuevoBoletin");
		$.ajax({
				url: 'includes/processNew.php',
				type: 'POST',
				async: true,
				data: formData,
				success:  function (response) {
			             $("#respuesta").html(response);
			         }
			});
	};
}

me imagino que el problema es con el form data, de echo es la primera vez que lo ocupo y me quede estancado en esto ...

espero su ayuda gracias :D

[Alexis88]

Eso sucede porque no estás usando correctamente al objeto FormData. Puedes crear al objeto sin pasarle un argumento y luego recorres al conjunto de elementos del formulario para añadírselos uno por uno o los añades a todos de una sola vez.

Esta es una forma básica de hacerlo:

Código Javascript:

var formulario = $("#formNuevoBoletin"),
    elementos = formulario.elements,
    total = elementos.length,
    formData = new FormData();
 
for (var i = 0; i < total; i++){
    if (elementos[i].type == "file"){
        var archivo = elementos[i].files;
        formData.append(elementos[i].name, archivo[0]);
    }
    else{
        formData.append(elementos[i].name, elementos[i].value);
    }
}
 
//Acá ejecutas al método Ajax
 

Lo que hago es simple. Primero, tomo al formulario, sus elementos y el total que estos representan, además, creo al objeto FormData, luego, recorro al conjunto de elementos del formulario y, en cada iteración, verifico el tipo de elemento de cada uno de ellos. Cuando se trate de un campo de tipo file, obtengo al conjunto de elementos que este posea y añado al primero de ellos (suponiendo que solo enviarás un archivo, de lo contrario, tendrás que usar un bucle para ir añadiéndolos) al objeto, caso contrario, es decir, si se trata de otro tipo de elemento, simplemente añado su valor. En ambos casos, cada valor irá relacionado al nombre del elemento.

Luego de esto, puedes enviar al objeto FormData a través del método Ajax. Solo como un consejo, la próxima vez, busca la documentación respectiva para que sepas qué hacer, aquí hay parte de lo que puedes encontrar con una simple búsqueda.

Saludos

[WorseMzg]

Iniciado por Alexis88

Solo como un consejo, la próxima vez, busca la documentación respectiva para que sepas qué hacer, aquí hay parte de lo que puedes encontrar con una simple búsqueda.

Saludos

sip si leí esa documentación, lo que no me quedo nunca claro era como ocupar el append con input de archivos ya que con texto lo pasaba sin ningun problema.

ya lo solucioné....

un millon de gracias.

[caricatos]

Hola:

Al objeto FormData se le puede pasar como argumento el mismo formulario: Subir archivos con Ajax... en el apunte no se usan librerías, y el código es bastante escueto.

Saludos