index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
<style type="text/css">
body{
    margin:0;
    padding:0;
    font-size:12px;
    font-family:verdana;
    border:none;
}

#dropbox{
    border:dotted 3px #ccc;
    position: fixed;
    min-height: 250px;
    overflow: hidden;
    width: 250px;
}

#dropbox .message{
    font-size: 12px;
    text-align: center;
    padding-top:160px;
    display: block;
    color:#ccc;
    font-weight:bold;
}

#dropbox .message i{
    color:#ccc;
    font-size:10px;
}


#dropbox .preview{
    width:230px;
    height: 240px;
    margin:0 auto;
    position: relative;
    text-align: center;
}

#dropbox .preview img{
    max-width: 230px;
    max-height:180px;
    display: block;
    
}

#dropbox .imageHolder{
    display: inline-block;
    position:relative;
}

#dropbox .uploaded{
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: url('/assets/img/done.png') no-repeat center center rgba(255,255,255,0.5);
    display: none;
}

#dropbox .preview.done .uploaded{
    display: block;
}


#dropbox .progressHolder,#dropbox .filepath{
    position: absolute;
    background-color:#252f38;
    height:18px;
    width:100%;
    left:0;
    bottom: 33px;
}


#dropbox .filepath{
    padding:0;
    background-color:none;
    height:20px;
    width:100%;
    left:0;
    bottom: 6px;
    
}
#dropbox .fileurl{
    position: absolute;
    padding:4px 2px;
    width:224px;
    font-size:12px;
    font-family:verdana;
border:solid 1px;   
 bottom: 2px;
    left: 0;
}

#dropbox .progress{
    background-color:#2586d0;
    position: absolute;
    height:100%;
    left:0;
    width:0;
    
    /*
    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
     */

}

#dropbox .preview.done .progress{
    width:100% !important;
}

</style>
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    

<body>
        
        
        <div id="dropbox">
            <span class="message" >Drop images here to upload. <br><i>(they will only be visible to you)</i></span>

       
        </div>
        
    
        <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
        
        <script src="assets/js/jquery.filedrop.js"></script>
        
        <script src="assets/js/script.js"></script>


</body>


</html>