<!-- Text Upload file Button --> <div class="upload_wrapper" style="float: left;" id="up0"> <div style="text-align: center;"> Upload File </div> <input style="width: 100px;height:100px;" id="uploadbtn1" name="pic[]" type="file" class="upload" /> </div> <br/> <br/> <!-- Link Upload file Button --> <div class="upload_wrapper" style="float: left;" id="up0"> <a href="#">Upload File</a> <input style="width: 100px;height:100px;" id="uploadbtn2" name="pic[]" type="file" class="upload" /> </div> <br/> <br/> <!-- Button Upload file Button --> <div class="upload_wrapper" style="float: left;" id="up0"> <div> <input type="button" value="Upload File"/> </div> <input style="width: 100px;height:100px;" id="uploadbtn3" name="pic[]" type="file" class="upload" /> </div> <br/> <br/> <!-- Image Upload file Button --> <div class="upload_wrapper" style="float: left;" id="up0"> <img src="http://www.voodoodesign.com/wp-content/uploads/2012/10/Upload-Big-Button.png" style="height:40px;"/> <input style="width: 100px;height:100px;" id="uploadbtn4" name="pic[]" type="file" class="upload" /> </div> <br/> <br/> <br/> <!-- Div Upload file Button --> <div class="upload_wrapper" style="float: left;" id="up0"> <div style="border:solid 1px grey;text-align: center;background-color: red;width: 100px;height: 100px;"> <br/>This<br/>is Div<br/> </div> <input style="width: 100px;height:100px;" id="uploadbtn5" name="pic[]" type="file" class="upload" /> </div>
.upload_wrapper { position: relative; overflow: hidden; cursor: pointer; //margin: 10px; } .upload_wrapper input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }