Start over with some random tutorial.
This commit is contained in:
parent
965d5e809c
commit
3acd9fd216
3 changed files with 265 additions and 18 deletions
262
css/style.css
262
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;
|
||||
text-align: center;
|
||||
margin-top: -150px;
|
||||
margin-left: -400px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
|
||||
/*-------------------------
|
||||
General Styles
|
||||
--------------------------*/
|
||||
|
||||
|
||||
|
||||
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:0;
|
||||
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;
|
||||
}
|
||||
13
index.php
13
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,10 +12,19 @@
|
|||
</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 & 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>
|
||||
<script src="js/upload.js"></script>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
|
||||
define('UPLOADS','uploads/');
|
||||
|
||||
if(array_key_exists('file', $_FILES)) {
|
||||
$file = $_FILES['file'];
|
||||
if(array_key_exists('image', $_FILES)) {
|
||||
$file = $_FILES['image'];
|
||||
|
||||
move_uploaded_file($file['tmp_name'], UPLOADS . $file['name']);
|
||||
}
|
||||
|
||||
|
||||
echo json_encode(array('status'=>'Uploaded successfully'));
|
||||
?>
|
||||
Loading…
Reference in a new issue