Question

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.

Answer 1

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