Foros del Web » Programando para Internet » Javascript »

vaidacion de formulario que solo permita imagenes

 Estas en el tema de vaidacion de formulario que solo permita imagenes en el foro de Javascript en Foros del Web. Hola a todos tengo este formulario el cual me valida perfectamente los campos que no estén vacíos al enviarlo... informa que tal campo esta vacio ...
  #1 (permalink)  
Antiguo 29/04/2014, 21:14
 
Fecha de Ingreso: noviembre-2004
Mensajes: 249
Antigüedad: 19 años, 5 meses
Puntos: 1
vaidacion de formulario que solo permita imagenes
Hola a todos tengo este formulario el cual me valida perfectamente los campos que no estén vacíos al enviarlo... informa que tal campo esta vacio yq ue hace falta para poder continuar incluso hace un focus señalando cual es el campo vacio.

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function validarForm(formulario) {
  if(form1.nombres.value.length==0) { //comprueba que no esté vacío
    form1.nombres.focus();   
    alert('Por favor Ingrese su Nombre o el de su Entidad'); 
    return false; //devolvemos el foco
  }
  if(form1.tipoidentificacion.selectedIndex==0) { //comprueba que no esté vacío
    form1.tipoidentificacion.focus();
    alert('Seleccione el Tipo de Identificación');
    return false;
  }
  if(form1.identificacion.value.length==0) {  //comprueba que no esté vacío
    form1.identificacion.focus();
    alert('Ingrese el Número de Identificación');
    return false;
  }
  if(form1.telefono.value.length==0) {  //comprueba que no esté vacío
    form1.telefono.focus();
    alert('Ingrese el Número de Teléfono o Celular');
    return false;
  }
if(form1.email.value.length==0) {  //comprueba que no esté vacío
    form1.email.focus();
    alert('Ingrese su Correo Electrónico, en el cual se le enviará todo el procedimiento a seguir');
    return false;
 }
 var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;          
                if (!(ercorreo.test(form1.email.value))) {  
                    alert('Ingrese un Correo Electrónico válido, en el cual se le enviará todo el procedimiento a seguir');
                    return false; 
 }
 //
 if(form1.consignacion.value.length==0) {  //comprueba que no esté vacío
    form1.consignacion.focus();
    alert('Ingrese el Número Consignación');
    return false;
  }
 //-----------------------------------------
if(form1.userfile.value.length==0) {  //comprueba que no esté vacío
    form1.userfile.focus();
    alert('Adjunte la imagen de la consignación');
    return false;
  }
return true ();
        }
</script>
<style type="text/css">
#sadrzaj #ostali_clanci {
    text-align: left;
}
.f {
    color: #000;
}
</style>
<style type="text/css">
.Estilo2 {font-size: 10}
</style>
<link href="mailattach.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.Estilo1 {    color: #FFFFFF;
    font-weight: bold;
}
.Estilo4 {font-size: small}
</style>
</head>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="" />
    <meta name="Author" content="" />
    <meta name="Robots" content="index,follow" />
    <meta name="Description" content="" />
    <meta name="Keywords" content="" />
    <link rel="stylesheet" type="text/css" href="images/style.css" />
<title>Corozal</title>
</head>
<?php
function generaPass(){
    //Se define una cadena de caractares. Te recomiendo que uses esta.
    $cadena = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
    //Obtenemos la longitud de la cadena de caracteres
    $longitudCadena=strlen($cadena);

    //Se define la variable que va a contener la contraseña
    $pass = "";
    //Se define la longitud de la contraseña, en mi caso 10, pero puedes poner la longitud que quieras
    $longitudPass=10;

    //Creamos la contraseña
    for($i=1 ; $i<=$longitudPass ; $i++){
        //Definimos numero aleatorio entre 0 y la longitud de la cadena de caracteres-1
        $pos=rand(0,$longitudCadena-1);

        //Vamos formando la contraseña en cada iteraccion del bucle, añadiendo a la cadena $pass la letra correspondiente a la posicion $pos en la cadena de caracteres definida.
        $pass .= substr($cadena,$pos,1);
    }
    return $pass;
}
?>
<body>
<div id="sadrzaj">
  <div id="sredina">
          <div align="justify">
            <table width="321" border="0" align="left" cellpadding="0" cellspacing="0">
              <tr>
                <td width="321"><div class="borde">
                  <div align="justify">
                    <form action="sube.php" method="post" enctype="multipart/form-data" id="form1" onsubmit="return validarForm(this);">
                      <table width="336" border="0" cellpadding="2" bordercolor="#FF00CC">
                        <tr bgcolor="#009933">
                          <td width="328" height="27" bgcolor="#A8A8A8" style="color: #FFFFFF; text-align: center;"><strong>
                          Enviar Consignaci&oacute;n<strong>
                          <br />
                          <input type="hidden" name="MAX_FILE_SIZE" value="100000000" />
                          </strong>
                          <input name="id" type="hidden" id="id" value="id" />
                          <input name="fecha" type="hidden" id="fecha" value="<? echo date("Y-m-d"); ?>" />
                          <input name="estado" type="hidden" id="estado" value="Verificar" />
                          <input name="clave" type="hidden" id="clave" value="<? echo generaPass();?>"/>
                          <input name="tiket" type="hidden" id="tiket" value="<? echo md5(time().rand(1, 100)); ?>"/>
                          <input name="ip" type="hidden" id="ip" value="<? echo $_SERVER[REMOTE_ADDR]; ?>"/>
                          <input name="consecutivo" type="hidden" id="consecutivo"/>
                          </strong></td>
                        </tr>
                        <tr>
                          <td height="293"><strong>Nombre o Empresa:</strong>
                            <br />
                            <input name="nombres" type="text" class="descdet" id="nombres" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="44"/>
                            <br />
                            Tipo de Identificaci&oacute;n
                            <strong>:</strong> <br />
                            <select name="tipoidentificacion" class="descdet" id="tipoidentificacion">
                              <option>Seleccione</option>
                              <option value="Cedula">Cedula </option>
                              <option value="Nit">Nit</option>
                              <option value="Cedula Extranjera">Cedula Extranjera</option>
                            </select>
                            <br />
                            <strong>Identificaci&oacute;n:</strong> <br />
                            <input name="identificacion" type="text" class="descdet" id="identificacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
                            <br />
                            Tel&eacute;fono o celular<br />
                            <input name="telefono" type="text" class="descdet" id="telefono" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
                            <br />
                            Correo Electr&oacute;nico:
                            <br />
                            (En este correo  se le enviar&aacute; todo el procedimiento  a seguir)<br />
                            <input name="email" type="text" class="descdet" id="email" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
                            <br />
                            N&uacute;mero de Consignaci&oacute;n: (N&uacute;mero del volante de consignaci&oacute;n)<br />
                            <input name="consignacion" type="text" class="descdet" id="consignacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
<br />
                            Imagen de la Consignaci&oacute;n:(JPG, GIF, JPEG, PNG)<br />
                          <input type="file" name="userfile" class="descdet" id="userfile" />                            <br /></td>
                        </tr>
                        <tr>
                          <td height="37"><!-----<input name="userfile" type="file" id="userfile" /></td>---->                            <input name="submit" type="submit" class="boton" value="Enviar" onclick="javascript:return validar();"/></td>
                        </tr>
                      </table>
                      <br />
                    </form>
                  </div>
                </div></td>
              </tr>
            </table>
          </div>
      </div>
    </div>
</body>
</html>
me gustaria que solo admita Imagenes jpg, gif, png etc yq ue de la alerta si se intenta adjuntar un archivo que no sea imagenes...

he encontrado este tuto que coloco el script en otro mensaje

http://www.forosdelweb.com/f18/valid...imagen-818852/

pero no logro incluirle el codigo por favor quien me ayuda...
Última edición por flashtrix; 29/04/2014 a las 21:17 Razón: correccion
  #2 (permalink)  
Antiguo 29/04/2014, 21:18
 
Fecha de Ingreso: noviembre-2004
Mensajes: 249
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: vaidacion de formulario que solo permita imagenes
este es el script que no me alcanzo a colocar

este es el script del tuto

Código PHP: 
Ver original
  1. <script type="text/javascript" language="javascript"> 
  2. function comprueba_extension(formulario, archivo) { 
  3.    extensiones_permitidas = new Array(".gif", ".jpg", ".png"); 
  4.    mierror = ""; 
  5.    if (!archivo) { 
  6.       //Si no tengo archivo, es que no se ha seleccionado un archivo en el formulario 
  7.         mierror = "No has seleccionado ningún archivo"; 
  8.    }else{ 
  9.       //recupero la extensión de este nombre de archivo 
  10.       extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase(); 
  11.       //alert (extension); 
  12.       //compruebo si la extensión está entre las permitidas 
  13.       permitida = false; 
  14.       for (var i = 0; i < extensiones_permitidas.length; i++) { 
  15.          if (extensiones_permitidas[i] == extension) { 
  16.          permitida = true; 
  17.          break; 
  18.          } 
  19.       } 
  20.       if (!permitida) { 
  21.          mierror = "Comprueba la extensión de los archivos a subir. \nSólo se pueden subir archivos con extensiones: " + extensiones_permitidas.join(); 
  22.         }else{ 
  23.              //submito! 
  24.          //alert ("Todo correcto. Voy a submitir el formulario."); 
  25.          formulario.submit(); 
  26.          return 1; 
  27.         } 
  28.    } 
  29.    //si estoy aqui es que no se ha podido submitir 
  30.    alert (mierror); 
  31.    return 0; 
  32. }
  33. </script>
  34. <form method=post action="#" enctype="multipart/form-data"> 
  35. <input type=file name="archivoupload"> 
  36. <input type=button name="Submit" value="Enviar" onclick="comprueba_extension(this.form, this.form.archivoupload.value)"> 
  37. </form>
  #3 (permalink)  
Antiguo 29/04/2014, 23:13
 
Fecha de Ingreso: noviembre-2004
Mensajes: 249
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: vaidacion de formulario que solo permita imagenes
ESTE ES EL CODIGO QUE QUIERO QUE ME AYUDEN A SOLUCIONAR:

Código Javascript: 
Ver original
  1. <script type="text/javascript" language="javascript"> 
  2. function comprueba_extension(formulario, archivo) { 
  3.    extensiones_permitidas = new Array(".gif", ".jpg", ".png"); 
  4.    mierror = ""; 
  5.    if (!archivo) { 
  6.       //Si no tengo archivo, es que no se ha seleccionado un archivo en el formulario 
  7.         mierror = "No has seleccionado ningún archivo"; 
  8.    }else{ 
  9.       //recupero la extensión de este nombre de archivo 
  10.       extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase(); 
  11.       //alert (extension); 
  12.       //compruebo si la extensión está entre las permitidas 
  13.       permitida = false; 
  14.       for (var i = 0; i < extensiones_permitidas.length; i++) { 
  15.          if (extensiones_permitidas[i] == extension) { 
  16.          permitida = true; 
  17.          break; 
  18.          } 
  19.       } 
  20.       if (!permitida) { 
  21.          mierror = "Comprueba la extensión de los archivos a subir. \nSólo se pueden subir archivos con extensiones: " + extensiones_permitidas.join(); 
  22.         }else{ 
  23.              //submito! 
  24.          //alert ("Todo correcto. Voy a submitir el formulario."); 
  25.          formulario.submit(); 
  26.          return 1; 
  27.         } 
  28.    } 
  29.    //si estoy aqui es que no se ha podido submitir 
  30.    alert (mierror); 
  31.    return 0; 
  32. }
  33. </script>
  34. <script type="text/javascript">
  35. function validarForm(formulario) {
  36.   if(form1.nombres.value.length==0) { //comprueba que no esté vacío
  37.     form1.nombres.focus();   
  38.     alert('Por favor Ingrese su Nombre o el de su Entidad'); 
  39.     return false; //devolvemos el foco
  40.   }
  41.   if(form1.tipoidentificacion.selectedIndex==0) { //comprueba que no esté vacío
  42.     form1.tipoidentificacion.focus();
  43.     alert('Seleccione el Tipo de Identificación');
  44.     return false;
  45.   }
  46.   if(form1.identificacion.value.length==0) {  //comprueba que no esté vacío
  47.     form1.identificacion.focus();
  48.     alert('Ingrese el Número de Identificación');
  49.     return false;
  50.   }
  51.   if(form1.telefono.value.length==0) {  //comprueba que no esté vacío
  52.     form1.telefono.focus();
  53.     alert('Ingrese el Número de Teléfono o Celular');
  54.     return false;
  55.   }
  56. if(form1.email.value.length==0) {  //comprueba que no esté vacío
  57.     form1.email.focus();
  58.     alert('Ingrese su Correo Electrónico, en el cual se le enviará todo el procedimiento a seguir');
  59.     return false;
  60.  }
  61.  var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;          
  62.                 if (!(ercorreo.test(form1.email.value))) {  
  63.                     alert('Ingrese un Correo Electrónico válido, en el cual se le enviará todo el procedimiento a seguir');
  64.                     return false; 
  65.  }
  66.  //
  67.  if(form1.consignacion.value.length==0) {  //comprueba que no esté vacío
  68.     form1.consignacion.focus();
  69.     alert('Ingrese el Número Consignación');
  70.     return false;
  71.   }
  72.  //-----------------------------------------
  73. if(form1.userfile.value.length==0) {  //comprueba que no esté vacío
  74.     form1.userfile.focus();
  75.     alert('Adjunte la imagen de la consignación');
  76.     return false;
  77.   }
  78. return true ();
  79.         }
  80. </script>
  81. <form method=post action="#" enctype="multipart/form-data"> 
  82.   <p>
  83.     <label for="nombres">Nombre:</label>
  84.     <input type="text" name="nombres" id="nombres">
  85.   </p>
  86.   <p>
  87.     Tipo de Identificacion: 
  88.     <select name="tipoidentificacion" class="descdet" id="tipoidentificacion">
  89.       <option>Seleccione</option>
  90.       <option value="Cedula">Cedula </option>
  91.       <option value="Nit">Nit</option>
  92.       <option value="Cedula Extranjera">Cedula Extranjera</option>
  93.     </select>
  94.   </p>
  95.   <p>Identificacion: 
  96.     <input name="identificacion" type="text" class="descdet" id="identificacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  97.   </p>
  98.   <p>
  99.     Telefono: 
  100.     <input name="telefono" type="text" class="descdet" id="telefono" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  101.   </p>
  102.   <p>
  103.     Correo: 
  104.     <input name="email" type="text" class="descdet" id="email" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  105.   </p>
  106.   <p>
  107.     <input type=file name="userfile" id="userfile"> 
  108.   </p>
  109.   <p>
  110.     <input type=button name="Submit" value="Enviar" onclick="comprueba_extension(this.form, this.form.userfile.value)">
  111.   </p> 
  112. </form>
  #4 (permalink)  
Antiguo 30/04/2014, 00:40
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: vaidacion de formulario que solo permita imagenes
Basta con que definas los tipos de imagen que deseas que se suban, detectes el del archivo seleccionado y los compares.

Código Javascript: 
Ver original
  1. var archivo = document.getElementById("archivo"), //El input de tipo 'file'
  2.     tiposAceptados = /(jpeg|png|gif)/, //Los tipos de imagen a aceptar
  3.     tipoArchivo; //Aquí se almacenará el tipo del archivo seleccionado
  4.  
  5. archivo.addEventListener("change", function(){
  6.     tipoArchivo = this.files[0].type.split("/")[1]; //Obtienes el tipo de archivo
  7.     console.log(tiposAceptados.test(tipoArchivo) ? "Correcto" : "Incorrecto");
  8. }, false);



Con el método test, haces la búsqueda del tipo del archivo seleccionado entre el grupo de tipos a admitir.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #5 (permalink)  
Antiguo 30/04/2014, 08:19
 
Fecha de Ingreso: noviembre-2004
Mensajes: 249
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: vaidacion de formulario que solo permita imagenes
Hola Alexis88 Gracias por responder ese es el problema que no he podido implementarlo en mi caso

acá el código en mención valida todos los campos avisando con un alert de javascript.. me gustaria que solo admita imagenes jpg, gif y png y de la alerta cuando se intente subir otra clase de archivo ya que en este ejemplo sube cualquier archivo... donde adiciono ese codigo....

aca el codigo..

Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2. function validarForm(formulario) {
  3.   if(form1.nombres.value.length==0) { //comprueba que no esté vacío
  4.     form1.nombres.focus();   
  5.     alert('Por favor Ingrese su Nombre o el de su Entidad'); 
  6.     return false; //devolvemos el foco
  7.   }
  8.   if(form1.tipoidentificacion.selectedIndex==0) { //comprueba que no esté vacío
  9.     form1.tipoidentificacion.focus();
  10.     alert('Seleccione el Tipo de Identificación');
  11.     return false;
  12.   }
  13.   if(form1.identificacion.value.length==0) {  //comprueba que no esté vacío
  14.     form1.identificacion.focus();
  15.     alert('Ingrese el Número de Identificación');
  16.     return false;
  17.   }
  18.   if(form1.telefono.value.length==0) {  //comprueba que no esté vacío
  19.     form1.telefono.focus();
  20.     alert('Ingrese el Número de Teléfono o Celular');
  21.     return false;
  22.   }
  23. if(form1.email.value.length==0) {  //comprueba que no esté vacío
  24.     form1.email.focus();
  25.     alert('Ingrese su Correo Electrónico, en el cual se le enviará todo el procedimiento a seguir');
  26.     return false;
  27.  }
  28.  var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;          
  29.                 if (!(ercorreo.test(form1.email.value))) {  
  30.                     alert('Ingrese un Correo Electrónico válido, en el cual se le enviará todo el procedimiento a seguir');
  31.                     return false; 
  32.  }
  33.  //
  34.  if(form1.consignacion.value.length==0) {  //comprueba que no esté vacío
  35.     form1.consignacion.focus();
  36.     alert('Ingrese el Número Consignación');
  37.     return false;
  38.   }
  39.  //-----------------------------------------
  40. if(form1.userfile.value.length==0) {  //comprueba que no esté vacío
  41.     form1.userfile.focus();
  42.     alert('Adjunte la imagen de la consignación');
  43.     return false;
  44.   }
  45. return true ();
  46.         }
  47. </script>
  48. <div class="borde">
  49.   <div align="justify">
  50.     <form action="sube.php" method="post" enctype="multipart/form-data" id="form1" onsubmit="return validarForm(this);">
  51.       <table width="336" border="0" cellpadding="2" bordercolor="#FF00CC">
  52.         <tr bgcolor="#009933">
  53.           <td width="328" height="27" bgcolor="#A8A8A8" style="color: #FFFFFF; text-align: center;"><strong> Enviar Consignaci&oacute;n<strong> <br />
  54.             <input type="hidden" name="MAX_FILE_SIZE" value="100000000" />
  55.             </strong></strong></td>
  56.         </tr>
  57.         <tr>
  58.           <td height="293"><strong>Nombre o Empresa:</strong> <br />
  59.             <input name="nombres" type="text" class="descdet" id="nombres" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="44"/>
  60.             <br />
  61.             Tipo de Identificaci&oacute;n <strong>:</strong> <br />
  62.             <select name="tipoidentificacion" class="descdet" id="tipoidentificacion">
  63.               <option>Seleccione</option>
  64.               <option value="Cedula">Cedula </option>
  65.               <option value="Nit">Nit</option>
  66.               <option value="Cedula Extranjera">Cedula Extranjera</option>
  67.             </select>
  68.             <br />
  69.             <strong>Identificaci&oacute;n:</strong> <br />
  70.             <input name="identificacion" type="text" class="descdet" id="identificacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  71.             <br />
  72.             Tel&eacute;fono o celular<br />
  73.             <input name="telefono" type="text" class="descdet" id="telefono" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  74.             <br />
  75.             Correo Electr&oacute;nico: <br />
  76.             <input name="email" type="text" class="descdet" id="email" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  77.             <br />
  78.             N&uacute;mero de Consignaci&oacute;n: <br />
  79.             <input name="consignacion" type="text" class="descdet" id="consignacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  80.             <br />
  81.             Imagen de la Consignaci&oacute;n:<br />
  82.             <input type="file" name="userfile" class="descdet" id="userfile" />
  83.             <br /></td>
  84.         </tr>
  85.         <tr>
  86.           <td height="37"><!-----<input name="userfile" type="file" id="userfile" /></td>---->
  87.             <input name="submit" type="submit" class="boton" value="Enviar" onclick="javascript:return validar();"/></td>
  88.         </tr>
  89.       </table>
  90.       <br />
  91.     </form>
  92.   </div>
  93. </div>
Última edición por flashtrix; 30/04/2014 a las 08:20 Razón: correcion
  #6 (permalink)  
Antiguo 30/04/2014, 11:55
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: vaidacion de formulario que solo permita imagenes
Para agregarlo como otra condición más, hazlo así:

Código Javascript: 
Ver original
  1. var tipoArchivo = form1.userfile.files[0].type.split("/")[1],
  2.     tiposAceptados = /(jpeg|png|gif)/;
  3.  
  4. if (!form1.userfile.value.length && tiposAceptados.test(tipoArchivo)){
  5.     form1.userfile.focus();
  6.     alert('Adjunte la imagen de la consignación y en un formato permitido');
  7.     return false;
  8. }

Siempre analiza el código que se te proporciona, no te limites a copiar y pegar pues así no aprenderás.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #7 (permalink)  
Antiguo 30/04/2014, 12:07
 
Fecha de Ingreso: noviembre-2004
Mensajes: 249
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: vaidacion de formulario que solo permita imagenes
Nada Alexis88 intente hacerloc omo me dices y me valida todos los campos pero aun permite subir cualquier clase de archivo que hago mal...

Código Javascript: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  4. <script type="text/javascript">
  5. function validarForm(formulario) {
  6.   if(form1.nombres.value.length==0) { //comprueba que no esté vacío
  7.     form1.nombres.focus();   
  8.     alert('Por favor Ingrese su Nombre o el de su Entidad'); 
  9.     return false; //devolvemos el foco
  10.   }
  11.   if(form1.tipoidentificacion.selectedIndex==0) { //comprueba que no esté vacío
  12.     form1.tipoidentificacion.focus();
  13.     alert('Seleccione el Tipo de Identificación');
  14.     return false;
  15.   }
  16.   if(form1.identificacion.value.length==0) {  //comprueba que no esté vacío
  17.     form1.identificacion.focus();
  18.     alert('Ingrese el Número de Identificación');
  19.     return false;
  20.   }
  21.   if(form1.telefono.value.length==0) {  //comprueba que no esté vacío
  22.     form1.telefono.focus();
  23.     alert('Ingrese el Número de Teléfono o Celular');
  24.     return false;
  25.   }
  26. if(form1.email.value.length==0) {  //comprueba que no esté vacío
  27.     form1.email.focus();
  28.     alert('Ingrese su Correo Electrónico, en el cual se le enviará todo el procedimiento a seguir');
  29.     return false;
  30.  }
  31.  var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;          
  32.                 if (!(ercorreo.test(form1.email.value))) {  
  33.                     alert('Ingrese un Correo Electrónico válido, en el cual se le enviará todo el procedimiento a seguir');
  34.                     return false; 
  35.  }
  36.  //
  37.  if(form1.consignacion.value.length==0) {  //comprueba que no esté vacío
  38.     form1.consignacion.focus();
  39.     alert('Ingrese el Número Consignación');
  40.     return false;
  41.   }
  42.  //-----------------------------------------
  43. if(form1.userfile.value.length==0) {  //comprueba que no esté vacío
  44.     form1.userfile.focus();
  45.     alert('Adjunte la imagen de la consignación');
  46.     return false;
  47.   }
  48. //------------------------------
  49. var tipoArchivo = form1.userfile.files[0].type.split("/")[1],
  50.     tiposAceptados = /(jpeg|png|gif)/;
  51.  
  52. if (!form1.userfile.value.length && tiposAceptados.test(tipoArchivo)){
  53.     form1.userfile.focus();
  54.     alert('Adjunte la imagen de la consignación y en un formato permitido');
  55.     return false;
  56. }
  57. //-------------------------------------
  58. return true ();
  59.         }
  60. </script>
  61. <style type="text/css">
  62. #sadrzaj #ostali_clanci {
  63.     text-align: left;
  64. }
  65. .f {
  66.     color: #000;
  67. }
  68. </style>
  69. <style type="text/css">
  70. .Estilo2 {font-size: 10}
  71. </style>
  72. <link href="mailattach.css" rel="stylesheet" type="text/css" />
  73. <style type="text/css">
  74. .Estilo1 {  color: #FFFFFF;
  75.     font-weight: bold;
  76. }
  77. .Estilo4 {font-size: small}
  78. </style>
  79. </head>
  80. <head>
  81.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  82.     <meta http-equiv="Content-Language" content="" />
  83.     <meta name="Author" content="" />
  84.     <meta name="Robots" content="index,follow" />
  85.     <meta name="Description" content="" />
  86.     <meta name="Keywords" content="" />
  87.     <link rel="stylesheet" type="text/css" href="images/style.css" />
  88. <title>Corozal</title>
  89. </head>
  90. <?php
  91. function generaPass(){
  92.     //Se define una cadena de caractares. Te recomiendo que uses esta.
  93.     $cadena = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
  94.     //Obtenemos la longitud de la cadena de caracteres
  95.     $longitudCadena=strlen($cadena);
  96.  
  97.     //Se define la variable que va a contener la contraseña
  98.     $pass = "";
  99.     //Se define la longitud de la contraseña, en mi caso 10, pero puedes poner la longitud que quieras
  100.     $longitudPass=10;
  101.  
  102.     //Creamos la contraseña
  103.     for($i=1 ; $i<=$longitudPass ; $i++){
  104.         //Definimos numero aleatorio entre 0 y la longitud de la cadena de caracteres-1
  105.         $pos=rand(0,$longitudCadena-1);
  106.  
  107.         //Vamos formando la contraseña en cada iteraccion del bucle, añadiendo a la cadena $pass la letra correspondiente a la posicion $pos en la cadena de caracteres definida.
  108.         $pass .= substr($cadena,$pos,1);
  109.     }
  110.     return $pass;
  111. }
  112. ?>
  113. <body>
  114. <div id="sadrzaj">
  115.   <div id="sredina">
  116.           <div align="justify">
  117.             <table width="321" border="0" align="left" cellpadding="0" cellspacing="0">
  118.               <tr>
  119.                 <td width="321"><div class="borde">
  120.                   <div align="justify">
  121.                     <form action="sube.php" method="post" enctype="multipart/form-data" id="form1" onsubmit="return validarForm(this);">
  122.                       <table width="336" border="0" cellpadding="2" bordercolor="#FF00CC">
  123.                         <tr bgcolor="#009933">
  124.                           <td width="328" height="27" bgcolor="#A8A8A8" style="color: #FFFFFF; text-align: center;"><strong>
  125.                           Enviar Consignaci&oacute;n<strong>
  126.                           <br />
  127.                           <input type="hidden" name="MAX_FILE_SIZE" value="100000000" />
  128.                           </strong>
  129.                           <input name="id" type="hidden" id="id" value="id" />
  130.                           <input name="fecha" type="hidden" id="fecha" value="<? echo date("Y-m-d"); ?>" />
  131.                           <input name="estado" type="hidden" id="estado" value="Verificar" />
  132.                           <input name="clave" type="hidden" id="clave" value="<? echo generaPass();?>"/>
  133.                           <input name="tiket" type="hidden" id="tiket" value="<? echo md5(time().rand(1, 100)); ?>"/>
  134.                           <input name="ip" type="hidden" id="ip" value="<? echo $_SERVER[REMOTE_ADDR]; ?>"/>
  135.                           <input name="consecutivo" type="hidden" id="consecutivo"/>
  136.                           </strong></td>
  137.                         </tr>
  138.                         <tr>
  139.                           <td height="293"><strong>Nombre o Empresa:</strong>
  140.                             <br />
  141.                             <input name="nombres" type="text" class="descdet" id="nombres" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="44"/>
  142.                             <br />
  143.                             Tipo de Identificaci&oacute;n
  144.                             <strong>:</strong> <br />
  145.                             <select name="tipoidentificacion" class="descdet" id="tipoidentificacion">
  146.                               <option>Seleccione</option>
  147.                               <option value="Cedula">Cedula </option>
  148.                               <option value="Nit">Nit</option>
  149.                               <option value="Cedula Extranjera">Cedula Extranjera</option>
  150.                             </select>
  151.                             <br />
  152.                             <strong>Identificaci&oacute;n:</strong> <br />
  153.                             <input name="identificacion" type="text" class="descdet" id="identificacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  154.                             <br />
  155.                             Tel&eacute;fono o celular<br />
  156.                             <input name="telefono" type="text" class="descdet" id="telefono" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  157.                             <br />
  158.                             Correo Electr&oacute;nico:
  159.                             <br />
  160.                             (En este correo  se le enviar&aacute; todo el procedimiento  a seguir)<br />
  161.                             <input name="email" type="text" class="descdet" id="email" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  162.                             <br />
  163.                             N&uacute;mero de Consignaci&oacute;n: (N&uacute;mero del volante de consignaci&oacute;n)<br />
  164.                             <input name="consignacion" type="text" class="descdet" id="consignacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  165. <br />
  166.                             Imagen de la Consignaci&oacute;n:(JPG, GIF, JPEG, PNG)<br />
  167.                           <input type="file" name="userfile" class="descdet" id="userfile" />                            <br /></td>
  168.                         </tr>
  169.                         <tr>
  170.                           <td height="37"><!-----<input name="userfile" type="file" id="userfile" /></td>---->                          <input name="submit" type="submit" class="boton" value="Enviar" onclick="javascript:return validar();"/></td>
  171.                         </tr>
  172.                       </table>
  173.                       <br />
  174.                     </form>
  175.                   </div>
  176.                 </div></td>
  177.               </tr>
  178.             </table>
  179.           </div>
  180.       </div>
  181.     </div>
  182. </body>
  183. </html>
  #8 (permalink)  
Antiguo 30/04/2014, 12:18
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: vaidacion de formulario que solo permita imagenes
Disculpa, se me olvidó un símbolo.

La condición debe ser así:

Código Javascript: 
Ver original
  1. if (!form1.userfile.value.length || !tiposAceptados.test(tipoArchivo))

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #9 (permalink)  
Antiguo 30/04/2014, 13:16
 
Fecha de Ingreso: noviembre-2004
Mensajes: 249
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: vaidacion de formulario que solo permita imagenes
GRACIAS ALEXIS88 :arriba

ERES EL MEJOR

ya pude solucionarlo gracias a tu ayuda Dios te Bendiga!!!

el codigo quedo asi:

Código Javascript: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  4. <script type="text/javascript">
  5. function validarForm(formulario) {
  6.   if(form1.nombres.value.length==0) { //comprueba que no esté vacío
  7.     form1.nombres.focus();   
  8.     alert('Por favor Ingrese su Nombre o el de su Entidad'); 
  9.     return false; //devolvemos el foco
  10.   }
  11.   if(form1.tipoidentificacion.selectedIndex==0) { //comprueba que no esté vacío
  12.     form1.tipoidentificacion.focus();
  13.     alert('Seleccione el Tipo de Identificación');
  14.     return false;
  15.   }
  16.   if(form1.identificacion.value.length==0) {  //comprueba que no esté vacío
  17.     form1.identificacion.focus();
  18.     alert('Ingrese el Número de Identificación');
  19.     return false;
  20.   }
  21.   if(form1.telefono.value.length==0) {  //comprueba que no esté vacío
  22.     form1.telefono.focus();
  23.     alert('Ingrese el Número de Teléfono o Celular');
  24.     return false;
  25.   }
  26. if(form1.email.value.length==0) {  //comprueba que no esté vacío
  27.     form1.email.focus();
  28.     alert('Ingrese su Correo Electrónico, en el cual se le enviará todo el procedimiento a seguir');
  29.     return false;
  30.  }
  31.  var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;          
  32.                 if (!(ercorreo.test(form1.email.value))) {  
  33.                     alert('Ingrese un Correo Electrónico válido, en el cual se le enviará todo el procedimiento a seguir');
  34.                     return false; 
  35.  }
  36.  //
  37.  if(form1.consignacion.value.length==0) {  //comprueba que no esté vacío
  38.     form1.consignacion.focus();
  39.     alert('Ingrese el Número Consignación');
  40.     return false;
  41.   }
  42.  //-----------------------------------------
  43. if(form1.userfile.value.length==0) {  //comprueba que no esté vacío
  44.     form1.userfile.focus();
  45.     alert('Adjunte la imagén de la consignación');
  46.     return false;
  47.   }
  48. //------------------------------
  49. var tipoArchivo = form1.userfile.files[0].type.split("/")[1],
  50.     tiposAceptados = /(jpeg|png|gif)/;
  51. if (!tiposAceptados.test(tipoArchivo)){ 
  52. //if (!form1.userfile.value.length && tiposAceptados.test(tipoArchivo)){
  53.     form1.userfile.focus();
  54.     alert('Formato de imagén no válido, solo jpg, gif, png');
  55.     return false;
  56. }
  57. //-------------------------------------
  58. return true ();
  59.         }
  60. </script>
  61. <style type="text/css">
  62. #sadrzaj #ostali_clanci {
  63.     text-align: left;
  64. }
  65. .f {
  66.     color: #000;
  67. }
  68. </style>
  69. <style type="text/css">
  70. .Estilo2 {font-size: 10}
  71. </style>
  72. <link href="mailattach.css" rel="stylesheet" type="text/css" />
  73. <style type="text/css">
  74. .Estilo1 {  color: #FFFFFF;
  75.     font-weight: bold;
  76. }
  77. .Estilo4 {font-size: small}
  78. </style>
  79. </head>
  80. <head>
  81.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  82.     <meta http-equiv="Content-Language" content="" />
  83.     <meta name="Author" content="" />
  84.     <meta name="Robots" content="index,follow" />
  85.     <meta name="Description" content="" />
  86.     <meta name="Keywords" content="" />
  87.     <link rel="stylesheet" type="text/css" href="images/style.css" />
  88. <title>Corozal</title>
  89. </head>
  90. <?php
  91. function generaPass(){
  92.     //Se define una cadena de caractares. Te recomiendo que uses esta.
  93.     $cadena = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
  94.     //Obtenemos la longitud de la cadena de caracteres
  95.     $longitudCadena=strlen($cadena);
  96.  
  97.     //Se define la variable que va a contener la contraseña
  98.     $pass = "";
  99.     //Se define la longitud de la contraseña, en mi caso 10, pero puedes poner la longitud que quieras
  100.     $longitudPass=10;
  101.  
  102.     //Creamos la contraseña
  103.     for($i=1 ; $i<=$longitudPass ; $i++){
  104.         //Definimos numero aleatorio entre 0 y la longitud de la cadena de caracteres-1
  105.         $pos=rand(0,$longitudCadena-1);
  106.  
  107.         //Vamos formando la contraseña en cada iteraccion del bucle, añadiendo a la cadena $pass la letra correspondiente a la posicion $pos en la cadena de caracteres definida.
  108.         $pass .= substr($cadena,$pos,1);
  109.     }
  110.     return $pass;
  111. }
  112. ?>
  113. <body>
  114. <div id="sadrzaj">
  115.   <div id="sredina">
  116.           <div align="justify">
  117.             <table width="321" border="0" align="left" cellpadding="0" cellspacing="0">
  118.               <tr>
  119.                 <td width="321"><div class="borde">
  120.                   <div align="justify">
  121.                     <form action="sube.php" method="post" enctype="multipart/form-data" id="form1" onsubmit="return validarForm(this);">
  122.                       <table width="336" border="0" cellpadding="2" bordercolor="#FF00CC">
  123.                         <tr bgcolor="#009933">
  124.                           <td width="328" height="27" bgcolor="#A8A8A8" style="color: #FFFFFF; text-align: center;"><strong>
  125.                           Enviar Consignaci&oacute;n<strong>
  126.                           <br />
  127.                           <input type="hidden" name="MAX_FILE_SIZE" value="100000000" />
  128.                           </strong>
  129.                           <input name="id" type="hidden" id="id" value="id" />
  130.                           <input name="fecha" type="hidden" id="fecha" value="<? echo date("Y-m-d"); ?>" />
  131.                           <input name="estado" type="hidden" id="estado" value="Verificar" />
  132.                           <input name="clave" type="hidden" id="clave" value="<? echo generaPass();?>"/>
  133.                           <input name="tiket" type="hidden" id="tiket" value="<? echo md5(time().rand(1, 100)); ?>"/>
  134.                           <input name="ip" type="hidden" id="ip" value="<? echo $_SERVER[REMOTE_ADDR]; ?>"/>
  135.                           <input name="consecutivo" type="hidden" id="consecutivo"/>
  136.                           </strong></td>
  137.                         </tr>
  138.                         <tr>
  139.                           <td height="293"><strong>Nombre o Empresa:</strong>
  140.                             <br />
  141.                             <input name="nombres" type="text" class="descdet" id="nombres" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="44"/>
  142.                             <br />
  143.                             Tipo de Identificaci&oacute;n
  144.                             <strong>:</strong> <br />
  145.                             <select name="tipoidentificacion" class="descdet" id="tipoidentificacion">
  146.                               <option>Seleccione</option>
  147.                               <option value="Cedula">Cedula </option>
  148.                               <option value="Nit">Nit</option>
  149.                               <option value="Cedula Extranjera">Cedula Extranjera</option>
  150.                             </select>
  151.                             <br />
  152.                             <strong>Identificaci&oacute;n:</strong> <br />
  153.                             <input name="identificacion" type="text" class="descdet" id="identificacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  154.                             <br />
  155.                             Tel&eacute;fono o celular<br />
  156.                             <input name="telefono" type="text" class="descdet" id="telefono" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  157.                             <br />
  158.                             Correo Electr&oacute;nico:
  159.                             <br />
  160.                             (En este correo  se le enviar&aacute; todo el procedimiento  a seguir)<br />
  161.                             <input name="email" type="text" class="descdet" id="email" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  162.                             <br />
  163.                             N&uacute;mero de Consignaci&oacute;n: (N&uacute;mero del volante de consignaci&oacute;n)<br />
  164.                             <input name="consignacion" type="text" class="descdet" id="consignacion" onkeyup="form.naslov.value=form.naslov.value.toUpperCase()" size="30"/>
  165. <br />
  166.                             Imagen de la Consignaci&oacute;n:(JPG, GIF, JPEG, PNG)<br />
  167.                           <input type="file" name="userfile" class="descdet" id="userfile" />                            <br /></td>
  168.                         </tr>
  169.                         <tr>
  170.                           <td height="37"><!-----<input name="userfile" type="file" id="userfile" /></td>---->                          <input name="submit" type="submit" class="boton" value="Enviar" onclick="javascript:return validar();"/></td>
  171.                         </tr>
  172.                       </table>
  173.                       <br />
  174.                     </form>
  175.                   </div>
  176.                 </div></td>
  177.               </tr>
  178.             </table>
  179.           </div>
  180.       </div>
  181.     </div>
  182. </body>
  183. </html>

Etiquetas: formulario, html, imagenes, input, php, variable
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:20.