/****** Drag and Drop Method For Input type="file" *******/
<style type="text/css">
.upload_box {
width:350px;
height: 50px;
color: #000;
font-size: 19px;
text-align: center;
padding: 20px 10px 0px;
margin:20px 0px;
overflow: hidden;
position: relative;
background: url("/images/arrow_upload.png") repeat-x scroll left top transparent;
background:#eeeeee;
border:1px solid #bbbbbb;
}
.uploadfile {
cursor: pointer;
display: block;
font-size: 200px;
height: 140px;
left: -250px;
opacity: 0;
position: absolute;
top: -10px;
width: 600px;
z-index: 97;
}
h3 {
font:bold 18px/24px Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 0px;
padding:0px 0px;
}
</style>
<body>
<div class="upload_box">
<input type="file" multiple="multiple" class="uploadfile" name="uploadfile" id="uploadfile">
<h3>Drag & Drop Files Here To upload</h3>
</div>
</body>
.upload_box {
width:350px;
height: 50px;
color: #000;
font-size: 19px;
text-align: center;
padding: 20px 10px 0px;
margin:20px 0px;
overflow: hidden;
position: relative;
background: url("/images/arrow_upload.png") repeat-x scroll left top transparent;
background:#eeeeee;
border:1px solid #bbbbbb;
}
.uploadfile {
cursor: pointer;
display: block;
font-size: 200px;
height: 140px;
left: -250px;
opacity: 0;
position: absolute;
top: -10px;
width: 600px;
z-index: 97;
}
h3 {
font:bold 18px/24px Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 0px;
padding:0px 0px;
}
</style>
<body>
<div class="upload_box">
<input type="file" multiple="multiple" class="uploadfile" name="uploadfile" id="uploadfile">
<h3>Drag & Drop Files Here To upload</h3>
</div>
</body>
No comments:
Post a Comment