Thursday, February 14, 2013

Dynamic Input type File Browse button Method

/****** Browse Button Method ******/

<style type="text/css">
.upload_block {
position:relative;
width:250px;
height:36px;
float:left;
}
.trueupload {
position:absolute;
top:20px;
right:0;

/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */

z-index:2; /* bring the real upload interactivity up front */
width:100px;
}
.dummyupload {
background: url(images/browse_btn.jpg) no-repeat 100% 50%;
height:36px;

}
.dummyupload input {
width:150px;
height:30px;
}
</style>

<body>

<form>
<div class="upload_block">
<label for="upload">Upload Image: </label>
<div class="dummyupload">
<input type="text" name="dummyupload" /> <!-- browse button is here as background -->
</div>
<input type="file" name="upload" class="trueupload" onchange="this.form. dummyupload.value = this.value;" />
</div>
</form>
</body>

/*----------------------------------------------------*/




<style type="text/css">
.upload_photo { position:relative; width:460px; height:34px; float:left }
.trueup { height: 34px; left: 0; opacity: 0; position: absolute; top: 0px; width: 460px; z-index: 9 }
.dummyup { background:#faf8f6; width:460px }
.dummyup .filebtn { background: url("../images/browse_btn.png") no-repeat scroll right top rgba(0, 0, 0, 0); border: medium none; height: 34px; position: absolute; right: -26px; top: -2px; width: 168px; }
.dummyup input[type='text'] { border: 1px solid #E3DCDC; color: #444444; font-size: 13px; height: 26px;    padding: 0 10px;    width:290px !important;  }
</style>
<body> 
<form>
<div class="upload_photo">
           <div class="dummyup">
            <input type="text" name="dummyup" value="" />
            <input type="submit" class="filebtn" value=""   />
            <!-- browse button is here as background -->
           </div>
           <input type="file" name="upload" class="trueup" onchange="dummyup.value = this.value;" />
          </div>
</form>
</body>


For more details click here

1 comment: