entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

¿Cómo mostrar una imagen oculta con Javascript y botón en JSP?

Buenas tardes a todos.

Tengo un script que valida la extensión de un archivo, que, en caso de que ésta sea correcta, oculta y
bloquea los botones del formulario de modo que no se puede volver a cargar el archivo hasta que
éste no esté subido en el servidor.

Pero ahora, quiero mostrar una imagen de "Espera" al momento de presionar el botón, sin embargo, no logro conseguirlo

mi Form de subida principal es éste

form action="AltaArchivo" method="post" enctype="multipart/form-data">
    <p>
        <center><input type="File" name="archivo" id="btnFile" title="Seleccione un archivo en Excel para comenzar"></center>
    </p><strong><center><div id="salida" style="color:red"></div></center></strong>
    <center><img id="img" src="IMAGES/progressdisc.gif" style="visibility: hidden"></center> <!--AQUÍ EL ATRIBUTO ES OCULTO-->       

    <p>      <br />
    </p>
  <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
  <p>Una vez que el archivo haya sido seleccionado, por favor, pulse el bot&oacute;n aceptar para que se d&eacute; inicio con el proceso de importaci&oacute;n.</p>
  <p>&nbsp;</p>

  <center><input type="button" name="Submit" id="btnSubmit" value="Aceptar" title="Pulse Aceptar cuando haya seleccionado un archivo" onclick="comprueba_extension(this.form, this.form.archivo.value)"></center>

  </form>

y éste es el Script

/*Por Pedro Ramos Millán - HRAEZ*/
/*Se valida la extensión ingresada dentro del Sistema*/
/*Se deshabilitan los botones de subida y archivo*/
function comprueba_extension(formulario, archivo) {  

   extensiones_permitidas = new Array(".xls", ".xlsx");
   mierror = "";
   if (!archivo) {

       mierror = "No se ha seleccionado ningún archivo";
   }else{

      extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();

      permitida = false;
      for (var i = 0; i < extensiones_permitidas.length; i++) {
         if (extensiones_permitidas[i] == extension) {
         permitida = true;
         break;
         }
      }
      if (!permitida) {
         mierror = "La Extensión "+extension+" Es inválida. Compruebe la extensión de los archivos a subir. \nSólo se pueden subir archivos con extensiones: " + extensiones_permitidas.join();
       }else{
         document.getElementById('salida').innerHTML='';  
         formulario.submit();
         document.getElementById("btnFile").disabled=true;
         document.getElementById("btnSubmit").disabled=true;
         document.getElementById("a").style.visibility="hidden";
         document.getElementById("b").style.visibility="hidden";
         document.getElementById("c").style.visibility="hidden";
         document.getElementById("img").style.visibility="visible";//Aquí le digo que cambie e atributo a visible
         return 1;    

       }
   }
   document.getElementById('salida').innerHTML=mierror;
   return 0;
}    

Ahora bien, he probado únicamente el segmento document.getElementById('salida').innerHTML=mierror; dentro del formulario
con una función independiente(function mostrar()), y es la única forma en la que logro mostrar la imagen.

De antemano, agradezco la atención brindada a esta pregunta. Buenas tardes.

1 Respuesta

2votos

white Puntos75620

Hola @pWolfman_furry29, tienes una llave no cerrada,

if (!permitida) {
    mierror = "La Extensión " + extension + " Es inválida. " +
              "Compruebe la extensión de los archivos a subir." +
              "\nSólo se pueden subir archivos con extensiones: " +  
              extensiones_permitidas.join();

    document.getElementById('salida').innerHTML = mierror;

    return 0;

} // <=== faltaba esta llave
else {
    // ...
    document.getElementById("img").style.visibility = "visible";
}

te propongo esta refactorización de tú código:

function comprobueba_extension (formulario, archivo) {
    var extensiones_permitidas, extension, show_error;

    show_error = function (msg) {
        document.getElementById('salida').innerHTML = msg;
        return 0;
    };

    if (!archivo) {
        return show_error('No se ha seleccionado un archivo.');
    }

    extensiones_permitidas = ['.xls', '.xlsx'];
    extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();

    if (extensiones_permitidas.indexOf(extension) === -1) {
        return show_error(
            "La Extensión " + extension + " Es inválida. " +
            "Compruebe la extensión de los archivos a subir." +
            "\nSólo se pueden subir archivos con extensiones: " +  
            extensiones_permitidas.join()
        );
    }

    document.getElementById('salida').innerHTML = '';  
    document.getElementById("btnFile").disabled = true;
    document.getElementById("btnSubmit").disabled = true;
    document.getElementById("a").style.visibility = "hidden";
    document.getElementById("b").style.visibility = "hidden";
    document.getElementById("c").style.visibility = "hidden";
    document.getElementById("img").style.visibility = "visible";

    formulario.submit();

    return 1;

}
// nota: Array.indexOf no es válido en IE <= 8

pWolfman_furry29 comentado Oct 22, 2015

Buenas noches @white. Gracias por tu respuesta.
He probado el script de acuerdo a la adecuación que me has hecho, pero éste dejó de realizar la función...
Veo que el FOR que tenía ya no está presente en tu versión.Éste sirve para iterar sobre el array de las extensiones.

Así como también veo que retornas en una función la cadena del error. Eso me resulta útil...
Es sólo que, sigo peleándome con esto:

document.getElementById("img").style.visibility = "visible";

muchas gracias nuevamente @white.
sigamos buscando la solución

white comentado Oct 22, 2015

Acabo de probar él código y no me dio problemas, es posible que algún elemento no exista, te da algún error la consola de tu navegador? intenta abrirla con F12 y ve si te tira algo,

intenta con este código:

function comprueba_extension (formulario, archivo) {
    var extension, extensiones_permitidas, show_error;

    show_error = function (msg) {
        document.getElementById('salida').innerHTML = msg;
        return 0;
    };

    if (!archivo) {
        return show_error('No se ha seleccionado un archivo.');
    }

    extensiones_permitidas = ['.xls', '.xlsx'];
    extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();

    if (extensiones_permitidas.indexOf(extension) === -1) {
        return show_error(
            "La Extensión " + extension + " Es inválida. " +
            "Compruebe la extensión de los archivos a subir." +
            "\nSólo se pueden subir archivos con extensiones: " +
            extensiones_permitidas.join()
        );
    }

    try {
        document.getElementById('salida').innerHTML = '';
        document.getElementById("btnFile").disabled = true;
        document.getElementById("btnSubmit").disabled = true;
        document.getElementById("a").style.visibility = "hidden";
        document.getElementById("b").style.visibility = "hidden";
        document.getElementById("c").style.visibility = "hidden";
        document.getElementById("img").style.visibility = "visible";
    } catch (exception) {
        alert(exception);
    }

    formulario.submit();

    return 1;
}

pWolfman_furry29 comentado Oct 22, 2015

Ahora sí. Ha funcionado @white.
Muchísimas gracias por tu amable atención y paciencia.

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta