1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Validar archivos adjuntos en formulario

Tema en 'Javascript' comenzado por killer97, 6 de Junio de 2017.

  1. killer97

    killer97 Nuevo Miembro

    Se incorporó:
    31 de Marzo de 2017
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola!

    Estoy realizando un formulario, a traves del cual deseo recibir dos o mas archivos adjuntos. Al realizar la validacion que se hayan adjuntado los archivos y poder realizar el envio, solo se valida 1 solo campo de archivo adjunto.

    Cómo puedo validar que se hayan seleccionado los archivos adjuntos para poder realizar el envio?

    Código (Javascript):
    <script language="javascript1.2">

    var filtro  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    function validar(){

    var datos = document.contactenos;
    var archivo = datos.Adjunto.value;
    var extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();

    if(datos.Nombre.value=="")
    {
    alert('Se requiere que llene el siguiente campo(s) para poder completar su envio:');
    datos.Nombre.focus();
    datos.Nombre.value="";
    return false;
    }

    if(datos.re_eMail.value=="")
    {
    alert('Se requiere que llene el siguiente campo con una direccion de email valida para poder completar su envio:');
    datos.re_eMail.focus();
    datos.re_eMail.value="";
    return false;
    }

    if (!filtro.test(datos.re_eMail.value)){

            alert("Su direccion de email es incorrecta");

            return false;

        }

    if(datos.Adjunto.value=="", datos.Adjuntos.value=="")
    {
    alert('Se requiere de un archivo valido para poder completar su envio:');
    datos.Adjunto.focus();
    datos.Adjunto.value="";
    return false;
    }

    if (extension==".jpg", ".jpeg", ".bmp", ".gif", ".png", ".pdf")
    {
    datos.Adjunto.focus()
    return true;
    }
    else
    {
    alert('Comprueba la extensión de los archivos a subir. \nSólo se pueden subir archivos con extensiones: .jpg .jpeg .bmp .gif .png .pdf')
    datos.Adjunto.value="";
    return false;
    }

    return true;

    }

    </script>
    <link href="css.css" rel="stylesheet" type="text/css">
    </head>
    <body>
                     <fieldset>
                      <legend>Datos de usuario:</legend>
                      <form action="index.php" method="post" enctype="multipart/form-data" name="contactenos">
                      <input type="hidden" name="Recipiente" value="correo@correo.com" />
                      <input type="hidden" name="Asunto" value="Informacion" />
                        Nombre<input name="Nombre" type="text" class="textfield" id="Nombre" />
                        Correo<input name="re_eMail" type="text" class="textfield_medium" id="re_eMail" />
                        Adjunto1<input name="Adjunto" type="file" class="textfield_file" id="Adjunto" />
                        Adjunto2<input name="Adjuntos" type="file" class="textfield_file" id="Adjuntos" />
                        Escriba la clave de seguridad en el siguiente campo:</td>
                        <input name="CAPTCHA_CODE" type="text" class="textfield_small" />><img src="captcha.php" class="border" />
                        <?php
     
                            if(!empty($Message)) {
                            echo $Message;
                            }
                           
                            ?>
                         <input name="btsend" type="submit" class="button" onClick="return validar();" value="Enviar" />
                              &nbsp;
                              <input type="reset" name="Borrar" class="button" value="Borrar" />
                              <input type="hidden" name="action" value="send" />
                        </form></fieldset>
     
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    659
    Me gusta recibidos:
    502
    Puntos de trofeos:
    93
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Si realizas una comparación no puedes utilizar coma para separar dos comprobaciones diferentes, para ello existe && (and) , || (or) en este caso para poder validar ese condicional

    Para ello debes de agregar los elementos inputs necesarios para poder adjuntar varios archivos, el cual para ello debes de agregar de manera dinámica como lo muestro en la siguiente imagen. La cual me permite agregar un input de tipo file y la opción de remover el input,
    te dejo un codepen para que lo analices el ejemplo ilustrado https://codepen.io/Dawud89/pen/GEpOmW

    upload_2017-6-8_0-48-26.png

    Ahora para poder guardarlo o enviarlo tienes que usar PHP para poder realizar el envió y JS el cual realices una petición ajax enviando los datos y files agregados...

    Espero que te ayude... Animo
     
    A AngelKrak le gusta esto.
  3. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    659
    Me gusta recibidos:
    502
    Puntos de trofeos:
    93
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Para poder seleccionar varios archivos puedes colocar el atributo multiple en el input y tener un simple input file

    HTML:
    <input id='file-input' type='file' multiple>
    En el siguiente link muestra un pequeño ejemplo simple pero efectivo
    http://www.javascripture.com/FileList

    Esa página anterior puede tiene varios ejemplo y es muy sencillo de FILE
     
    Última modificación: 9 de Junio de 2017
    A AngelKrak le gusta esto.

Comparte esta página