Start over with some random tutorial.

css/style.css

@@ -1,15 +1,253 @@
-body {
+/*-------------------------
-	background-color: #00487D;
+	Simple reset
+--------------------------*/
+
+
+
+*{
+	margin:0;
+	padding:0;
 }
 
-#drop {
+
-	background-color: #0066B3;
+
-	height: 300px;
+/*-------------------------
-	width: 800px;
+	General Styles
-	text-align: center;
+--------------------------*/
-	margin-top: -150px;
+
-	margin-left: -400px;
+
+
+html{
+	background:url('../img/background_tile_2.jpg');
+	min-height:100%;
+	position:relative;
+	
+}
+
+body{
+	color:#fff;
+	min-height:600px;
+	font:14px/1.3 'Segoe UI',Arial, sans-serif;
+}
+
+a, a:visited {
+	text-decoration:none;
+	outline:none;
+	color:#54a6de;
+}
+
+a:hover{
+	text-decoration:underline;
+}
+
+header, footer{
+	display:block;
+}
+
+
+
+/*-------------------------
+	Header Styles
+--------------------------*/
+
+
+
+header{
+	background:url('../img/background_tile_1.jpg');
+	padding:75px;
+	position: relative;
+}
+
+header:before,
+#dropbox:before{
+	display: block;
+	content:'';
+	height:4px;
+	width:100%;
+	background:url('../img/blue_line.jpg');
 	position: absolute;
-	top: 50%;
+	top:0;
-	left: 50%;
+	left:0;
-}
+	box-shadow:0 2px 2px rgba(0,0,0,0.4);
+}
+
+
+h1{
+	background:url('../img/logo.jpg') no-repeat top center;
+	height:92px;
+	overflow: hidden;
+	text-indent: -99999px;
+	text-align: center;
+}
+
+
+
+/*-------------------------
+	Dropbox Element
+--------------------------*/
+
+
+
+#dropbox{
+	background:url('../img/background_tile_3.jpg');
+	
+	border-radius:3px;
+	position: relative;
+	margin:80px auto 90px;
+	min-height: 290px;
+	overflow: hidden;
+	padding-bottom: 40px;
+    width: 990px;
+	
+	box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
+}
+
+
+#dropbox .message{
+	font-size: 11px;
+    text-align: center;
+    padding-top:160px;
+    display: block;
+}
+
+#dropbox .message i{
+	color:#ccc;
+	font-size:10px;
+}
+
+#dropbox:before{
+	border-radius:3px 3px 0 0;
+}
+
+
+
+/*-------------------------
+	Image Previews
+--------------------------*/
+
+
+
+#dropbox .preview{
+	width:245px;
+	height: 215px;
+	float:left;
+	margin: 55px 0 0 60px;
+	position: relative;
+	text-align: center;
+}
+
+#dropbox .preview img{
+	max-width: 240px;
+	max-height:180px;
+	border:3px solid #fff;
+	display: block;
+	
+	box-shadow:0 0 2px #000;
+}
+
+#dropbox .imageHolder{
+	display: inline-block;
+	position:relative;
+}
+
+#dropbox .uploaded{
+	position: absolute;
+	top:0;
+	left:0;
+	height:100%;
+	width:100%;
+	background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);
+	display: none;
+}
+
+#dropbox .preview.done .uploaded{
+	display: block;
+}
+
+
+
+/*-------------------------
+	Progress Bars
+--------------------------*/
+
+
+
+#dropbox .progressHolder{
+	position: absolute;
+	background-color:#252f38;
+	height:12px;
+	width:100%;
+	left:0;
+	bottom: 0;
+	
+	box-shadow:0 0 2px #000;
+}
+
+#dropbox .progress{
+	background-color:#2586d0;
+	position: absolute;
+	height:100%;
+	left:0;
+	width:0;
+	
+	box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;
+	
+	-moz-transition:0.25s;
+	-webkit-transition:0.25s;
+	-o-transition:0.25s;
+	transition:0.25s;
+}
+
+#dropbox .preview.done .progress{
+	width:100% !important;
+}
+
+
+
+/*----------------------------
+	The Footer
+-----------------------------*/
+
+
+
+footer{
+	display:block;
+	background-color: #151517;
+    
+    position:fixed;
+	width:100%;
+	height:70px;
+	bottom:0;
+	left:0;
+	z-index: 100000;
+	
+	box-shadow: 0 -1px 2px #171717;
+	-webkit-box-shadow: 0 -1px 2px #171717;
+	-moz-box-shadow: 0 -1px 2px #171717;
+}
+
+footer h2{
+	font-size:20px;
+	font-weight:normal;
+	left:50%;
+	margin-left:-400px;
+	padding:22px 0;
+	position:absolute;
+	width: 540px;
+	color:#eee;
+}
+
+footer a.tzine,a.tzine:visited{
+	background:url("../img/tzine.png") no-repeat right top;
+	border:none;
+	text-decoration:none;
+	color:#FCFCFC;
+	font-size:12px;
+	height:70px;
+	left:50%;
+	line-height:31px;
+	margin:23px 0 0 110px;
+	position:absolute;
+	top:0;
+	width:290px;
+}

index.php

@@ -3,7 +3,7 @@
 	<head>
 		<title>No Chicks Allowed: Image Repository</title>
 		<meta charset="utf-8" />
-		<link rel="stylesheet" type="text/css" media="all" href="css/html5reset-1.6.1.css" />
+		<!-- <link rel="stylesheet" type="text/css" media="all" href="css/html5reset-1.6.1.css" /> -->
 		<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
 
 		<!--[if lt IE 9]>
@@ -12,9 +12,18 @@
     </head>
 
     <body>
-		<div id="drop">
+		<header>
-
+			<h1>HTML5 File Upload with jQuery and PHP</h1>
+		</header>
+		
+		<div id="dropbox">
+			<span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>
 		</div>
+		
+        <footer>
+	        <h2>HTML5 File Upload with jQuery and PHP</h2>
+            <a class="tzine" href="http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/">Read &amp; Download on</a>
+        </footer>
 
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 		<script src="js/jquery.filedrop.js"></script>

upload.php

@@ -11,11 +11,11 @@
 
 define('UPLOADS','uploads/');
 
-if(array_key_exists('file', $_FILES)) {
+if(array_key_exists('image', $_FILES)) {
-	$file = $_FILES['file'];
+	$file = $_FILES['image'];
 
 	move_uploaded_file($file['tmp_name'], UPLOADS . $file['name']);
 }
 
-
+echo json_encode(array('status'=>'Uploaded successfully'));
 ?>