Thursday, February 14, 2013

Dynamic Input type File Drag and Drop Method

/****** Drag and Drop Method For Input type="file" *******/
<style type="text/css">
.upload_box {
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;
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;


<div class="upload_box">
<input type="file" multiple="multiple" class="uploadfile" name="uploadfile" id="uploadfile">
<h3>Drag &amp; Drop Files Here To upload</h3>


No comments:

Post a Comment