Foros del Web » Programando para Internet » Jquery »

upload multiple con jquery.validate

Estas en el tema de upload multiple con jquery.validate en el foro de Jquery en Foros del Web. Hola a todos intento hacer un upload multiple de 7 imagenes mediante ajax, antes de realizar el envio uso la libreria jquery.validate para evitar que ...
  #1 (permalink)  
Antiguo 05/06/2015, 10:07
 
Fecha de Ingreso: junio-2003
Ubicación: Vivo del trabajo a casa y de casa al trabajo
Mensajes: 21
Antigüedad: 21 años, 6 meses
Puntos: 0
upload multiple con jquery.validate

Hola a todos intento hacer un upload multiple de 7 imagenes mediante ajax, antes de realizar el envio uso la libreria jquery.validate para evitar que hagan el submit sin informar de las imagenes, para el upload mediante ajax estoy usando la libreria jquery.form que encontre http://malsup.com/jquery/form/ el problema lo tengo cuando intento unir los dos codigos, por separado las dos librerias funcionan a la perfeccion.

Aqui un poco de codigo:

Formulario de recogida

Código HTML:
<form name="frm_upld" id="frm_upld" method="post" action="imagenOblCdoAJAX.php" enctype="multipart/form-data" >
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><label for="label">Imagen 1</label></td>
      <td><input type="file" name="myfile[0]" id="matricula" ></td>
    </tr>
    <tr>
      <td><label for="label">Imagen 2</label></td>
      <td><input type="file" name="myfile[1]" id="documentacion" ></td>
    </tr>
    <tr>
      <td><label for="label">Imagen 3</label></td>
      <td><input type="file" name="myfile[2]" id="cuadro" ></td>
    </tr>
    <tr>
      <td><label for="label">Imagen 4</label></td>
      <td><input type="file" name="myfile[3]" id="intDelCon" ></td>
    </tr>
    <tr>
      <td><label for="label">Imagen 5</label></td>
      <td><input type="file" name="myfile[4]" id="intDelCop" ></td>
    </tr>
    <tr>
      <td><label for="label">Imagen 6</label></td>
      <td><input type="file" name="myfile[5]" id="intDetCon" ></td>
    </tr>
    <tr>
      <td><label for="label">Imagen 7</label></td>
      <td><input type="file" name="myfile[6]" id="intDetCop" ></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div class="progress">
          <div class="bar"></div >
          <div class="percent">0%</div >
        </div></td>
      <td align="right"><input type="submit" value="Subir imagenes">
      </td>
    </tr>
  </table>
</form> 
Codigo que uso para la validacion de los campos imagen:

Código HTML:
<script>
	$("document").ready(function(){
		$("#frm_upld").validate({
			rules: {
				"myfile[0]": {
					required: true,
				},
				"myfile[1]": {
					required: true,
				},
				"myfile[2]": {
					required: true,
				},
				"myfile[3]": {
					required: true,
				},
				"myfile[4]": {
					required: true,
				},
				"myfile[5]": {
					required: true,
				},
				"myfile[6]": {
					required: true,
				}
			},
			messages: {
				"myfile[0]": {
					required: "La imagen es obligatoria",
				},
				"myfile[1]": {
					required: "La imagen es obligatoria",
				},
				"myfile[2]": {
					required: "La imagen es obligatoria",
				},
				"myfile[3]": {
					required: "La imagen es obligatoria",
				},
				"myfile[4]": {
					required: "La imagen es obligatoria",
				},
				"myfile[5]": {
					required: "La imagen es obligatoria",
				},
				"myfile[6]": {
					required: "La imagen es obligatoria",
				}
			}		
		});
	});
</script> 
Upload mediante ajax

Código HTML:
<script>
	(function(){
		var bar = $('.bar');
		var percent = $('.percent');
		var status = $('#status');

		$('form').ajaxForm({
			beforeSend: function(){
				status.empty();
				var percentVal = '0%';
				bar.width(percentVal)
				percent.html(percentVal);
			},
			uploadProgress: function(event, position, total, percentComplete){
				var percentVal = percentComplete + '%';
				bar.width(percentVal)
				percent.html(percentVal);
			},
			success: function(){
				var percentVal = '100%';
				bar.width(percentVal)
				percent.html(percentVal);
			},
			complete: function(xhr){
				status.html(xhr.responseText);
			}
		});
	})();
</script> 
I finalmente todo junto:

Código HTML:
<script>
	$("document").ready(function(){
		$("#frm_upld").validate({
			rules: {
				"myfile[0]": {
					required: true,
				},
				"myfile[1]": {
					required: true,
				},
				"myfile[2]": {
					required: true,
				},
				"myfile[3]": {
					required: true,
				},
				"myfile[4]": {
					required: true,
				},
				"myfile[5]": {
					required: true,
				},
				"myfile[6]": {
					required: true,
				}
			},
			messages: {
				"myfile[0]": {
					required: "La imagen es obligatoria",
				},
				"myfile[1]": {
					required: "La imagen es obligatoria",
				},
				"myfile[2]": {
					required: "La imagen es obligatoria",
				},
				"myfile[3]": {
					required: "La imagen es obligatoria",
				},
				"myfile[4]": {
					required: "La imagen es obligatoria",
				},
				"myfile[5]": {
					required: "La imagen es obligatoria",
				},
				"myfile[6]": {
					required: "La imagen es obligatoria",
				}
			},
			submitHandler: function(form) {
				var bar = $('.bar');
				var percent = $('.percent');
				var status = $('#status');
			
				$(form).ajaxForm({
					beforeSend: function(){
						status.empty();
						var percentVal = '0%';
						bar.width(percentVal)
						percent.html(percentVal);
					},
					uploadProgress: function(event, position, total, percentComplete){
						var percentVal = percentComplete + '%';
						bar.width(percentVal)
						percent.html(percentVal);
					},
					success: function(){
						var percentVal = '100%';
						bar.width(percentVal)
						percent.html(percentVal);
					},
					complete: function(xhr){
						status.html(xhr.responseText);
					}
				});
			}		
		});
	});
</script> 

Cuando lo pongo todo junto la parte de la validacion funciona correcto pero no hace el submit, estoy empezando en jquery y seguramente me estoy saltando algun paso pero no encentro el problema. Si alguien me puede echar una mano se lo agradeceria.

Un saludo

Etiquetas: upload
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:28.