Java Mailing List Archive

http://www.junlu.com/

Home » Home (12/2007) » Struts 2 »

Solution to Image for Browse Button in <input type="file">

Webmaster

2004-08-23


The solution is in the capitalized HTML. This has been tested and
works. There is a slight problem with Opera browsers, because they do
not support opacity. This still works but the facade form is covered by
the form that really works. The way this works is to let the normal
operations be conducted by the real form while what the user sees is the
form facade. The downside is that you cannot see changes to the text
which are done manually, since those changes are in fact happening to
the real form, which is invisible.

Michael McGrady

<html>
  <head>
    <title>
       UPLOADER BROWSE BUTTON IMAGE TEST
    </title>
    <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
    <SCRIPT TYPE="text/javascript">
       function fillfacadeForm()
       {
          document.forms['facadeForm'].myFileText.value=
document.forms['realForm'].uploadFile.value;
       }
    </SCRIPT>
    <STYLE TYPE="text/css">
       .fileUpload {
       -moz-opacity:0 ;
       filter:alpha(opacity: 0);
       -khtml-opacity: 0;
       }
    </STYLE>
  </head>
  <body bgcolor="#FFFFFF" text="#000000"><br>
    <SPAN STYLE="position: absolute; middle: 10px; left:
10px;z-index: 1;">
       <FORM
          NAME="realForm"
          ACTION="browse.html"
          METHOD="post"
          ENCTYPE="multipart/form-data">
          <INPUT
            TYPE="hidden"
            NAME="fileOp"
            VALUE="fileValue">
          <INPUT
            TYPE="file"
            CLASS="fileUpload"
            NAME="uploadFile"
            ONKEYUP="fillfacadeForm();"
            ONMOUSEOUT="fillfacadeForm();">
          &nbsp;&nbsp;&nbsp;
          <INPUT
            TYPE="image"
            NAME="submit"
            VALUE="fileValue"
            SRC="submit.gif">
       </FORM>
    </SPAN>

    <SPAN STYLE="position: absolute; middle: 10px; left: 10px;
z-index: 0;">
       <FORM NAME="facadeForm">
          <INPUT TYPE="text" NAME="myFileText">
          <IMG SRC="browse.gif" BORDER="0">
       </FORM>
    </SPAN>
  </body>
</html>



---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@(protected)
For additional commands, e-mail: user-help@(protected)

©2008 junlu.com - Jax Systems, LLC, U.S.A.