Style adjustments and adding in tutorial JS file.
This commit is contained in:
parent
3acd9fd216
commit
262822e943
3 changed files with 111 additions and 126 deletions
|
|
@ -18,7 +18,7 @@
|
||||||
|
|
||||||
|
|
||||||
html{
|
html{
|
||||||
background:url('../img/background_tile_2.jpg');
|
background-color: #c0c0c0;
|
||||||
min-height:100%;
|
min-height:100%;
|
||||||
position:relative;
|
position:relative;
|
||||||
|
|
||||||
|
|
@ -53,30 +53,21 @@ header, footer{
|
||||||
|
|
||||||
|
|
||||||
header{
|
header{
|
||||||
background:url('../img/background_tile_1.jpg');
|
background-color: #303030;
|
||||||
padding:75px;
|
position: fixed;
|
||||||
position: relative;
|
width: 100%;
|
||||||
}
|
height: 40px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100000;
|
||||||
|
|
||||||
header:before,
|
box-shadow: 0 1px 2px #303030;
|
||||||
#dropbox:before{
|
-webkit-box-shadow: 0 1px 2px #303030;
|
||||||
display: block;
|
-moz-box-shadow: 0 1px 2px #303030;
|
||||||
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{
|
h1{
|
||||||
background:url('../img/logo.jpg') no-repeat top center;
|
height:40px;
|
||||||
height:92px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-indent: -99999px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -89,7 +80,7 @@ h1{
|
||||||
|
|
||||||
|
|
||||||
#dropbox{
|
#dropbox{
|
||||||
background:url('../img/background_tile_3.jpg');
|
background-color: #a0a0a0;
|
||||||
|
|
||||||
border-radius:3px;
|
border-radius:3px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -108,10 +99,11 @@ h1{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top:160px;
|
padding-top:160px;
|
||||||
display: block;
|
display: block;
|
||||||
|
color: #00487D;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropbox .message i{
|
#dropbox .message i{
|
||||||
color:#ccc;
|
color:#00487D;
|
||||||
font-size:10px;
|
font-size:10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -201,53 +193,3 @@ h1{
|
||||||
#dropbox .preview.done .progress{
|
#dropbox .preview.done .progress{
|
||||||
width:100% !important;
|
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,18 +13,13 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>HTML5 File Upload with jQuery and PHP</h1>
|
<h1>NCA Screens</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="dropbox">
|
<div id="dropbox">
|
||||||
<span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>
|
<span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>
|
||||||
</div>
|
</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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
|
||||||
<script src="js/jquery.filedrop.js"></script>
|
<script src="js/jquery.filedrop.js"></script>
|
||||||
<script src="js/upload.js"></script>
|
<script src="js/upload.js"></script>
|
||||||
|
|
|
||||||
136
js/upload.js
136
js/upload.js
|
|
@ -1,53 +1,101 @@
|
||||||
var previewHtml =
|
$(function(){
|
||||||
'<div class="preview">' +
|
var dropbox = $('#dropbox'),
|
||||||
'<span class="imagePreview">' +
|
message = $('.message', dropbox);
|
||||||
'<img /><span class="imageSuccess"></span>' +
|
|
||||||
'</span>' +
|
|
||||||
'<div class="imageProgress"><div class="progressBar"></div></div>' +
|
|
||||||
'</div>';
|
|
||||||
|
|
||||||
$('#drop').filedrop({
|
dropbox.filedrop({
|
||||||
url: 'upload.php',
|
// The name of the $_FILES entry:
|
||||||
paramname: 'file',
|
paramname:'image',
|
||||||
maxfiles: 4,
|
|
||||||
maxfilesize: 1,
|
maxfiles: 5,
|
||||||
|
maxfilesize: 2,
|
||||||
|
url: 'upload.php',
|
||||||
|
|
||||||
|
uploadFinished:function(i,file,response){
|
||||||
|
$.data(file).addClass('done');
|
||||||
|
// response is the JSON object that post_file.php returns
|
||||||
|
},
|
||||||
|
|
||||||
|
error: function(err, file) {
|
||||||
|
switch(err) {
|
||||||
|
case 'BrowserNotSupported':
|
||||||
|
showMessage('Your browser does not support HTML5 file uploads!');
|
||||||
|
break;
|
||||||
|
case 'TooManyFiles':
|
||||||
|
alert('Too many files! Please select 5 at most! (configurable)');
|
||||||
|
break;
|
||||||
|
case 'FileTooLarge':
|
||||||
|
alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Called before each upload is started
|
||||||
|
beforeEach: function(file){
|
||||||
|
if(!file.type.match(/^image\//)){
|
||||||
|
alert('Only images are allowed!');
|
||||||
|
|
||||||
|
// Returning false will cause the
|
||||||
|
// file to be rejected
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadStarted:function(i, file, len){
|
||||||
|
createImage(file);
|
||||||
|
},
|
||||||
|
|
||||||
|
progressUpdated: function(i, file, progress) {
|
||||||
|
$.data(file).find('.progress').width(progress);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var template = '<div class="preview">'+
|
||||||
|
'<span class="imageHolder">'+
|
||||||
|
'<img />'+
|
||||||
|
'<span class="uploaded"></span>'+
|
||||||
|
'</span>'+
|
||||||
|
'<div class="progressHolder">'+
|
||||||
|
'<div class="progress"></div>'+
|
||||||
|
'</div>'+
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
|
||||||
|
function createImage(file){
|
||||||
|
|
||||||
|
var preview = $(template),
|
||||||
|
image = $('img', preview);
|
||||||
|
|
||||||
beforeEach: function(file) {
|
|
||||||
// alert('temp attempting upload') ;
|
|
||||||
},
|
|
||||||
uploadStarted: function(i, file, len) {
|
|
||||||
var reader = new FileReader();
|
var reader = new FileReader();
|
||||||
|
|
||||||
reader.onload = function(e) {
|
image.width = 100;
|
||||||
alert(e.target.result);
|
image.height = 100;
|
||||||
$('img',$(previewHtml)).attr('src', e.target.result);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
reader.onload = function(e){
|
||||||
|
|
||||||
|
// e.target.result holds the DataURL which
|
||||||
|
// can be used as a source of the image:
|
||||||
|
|
||||||
|
image.attr('src',e.target.result);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Reading the file as a DataURL. When finished,
|
||||||
|
// this will trigger the onload function above:
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
$(previewHtml).appendTo($('#drop'));
|
|
||||||
|
|
||||||
$.data(file, $(previewHtml));l
|
message.hide();
|
||||||
},
|
preview.appendTo(dropbox);
|
||||||
progressUpdated: function(i, file, progress) {
|
|
||||||
$.data(file).find('.progressBar').width(progress);
|
// Associating a preview container
|
||||||
},
|
// with the file, using jQuery's $.data():
|
||||||
uploadFinished: function(i, file, response, time) {
|
|
||||||
$.data(file).addClass('complete');
|
$.data(file,preview);
|
||||||
},
|
}
|
||||||
|
|
||||||
|
function showMessage(msg){
|
||||||
|
message.html(msg);
|
||||||
|
}
|
||||||
|
|
||||||
error: function(type, file) {
|
|
||||||
switch(type) {
|
|
||||||
case 'BrowserNotSupported':
|
|
||||||
alert('temp no html5 drag and drop');
|
|
||||||
break;
|
|
||||||
case 'TooManyFiles':
|
|
||||||
alert('temp too many files (max:4)');
|
|
||||||
break;
|
|
||||||
case 'FileTooLarge':
|
|
||||||
alert('temp' + file.name + ' too large (max:1mb');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
Loading…
Reference in a new issue