From 262822e9438d5e312c80a82a7fd3b58d387142d7 Mon Sep 17 00:00:00 2001 From: Andrew Tomaka Date: Wed, 2 Nov 2011 13:31:05 -0400 Subject: [PATCH] Style adjustments and adding in tutorial JS file. --- css/style.css | 90 ++++++-------------------------- index.php | 7 +-- js/upload.js | 140 +++++++++++++++++++++++++++++++++----------------- 3 files changed, 111 insertions(+), 126 deletions(-) diff --git a/css/style.css b/css/style.css index 2297104..a28a4f6 100644 --- a/css/style.css +++ b/css/style.css @@ -18,7 +18,7 @@ html{ - background:url('../img/background_tile_2.jpg'); + background-color: #c0c0c0; min-height:100%; position:relative; @@ -53,30 +53,21 @@ header, footer{ header{ - background:url('../img/background_tile_1.jpg'); - padding:75px; - position: relative; -} + background-color: #303030; + position: fixed; + width: 100%; + height: 40px; + top: 0; + left: 0; + z-index: 100000; -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); + box-shadow: 0 1px 2px #303030; + -webkit-box-shadow: 0 1px 2px #303030; + -moz-box-shadow: 0 1px 2px #303030; } - h1{ - background:url('../img/logo.jpg') no-repeat top center; - height:92px; - overflow: hidden; - text-indent: -99999px; + height:40px; text-align: center; } @@ -89,7 +80,7 @@ h1{ #dropbox{ - background:url('../img/background_tile_3.jpg'); + background-color: #a0a0a0; border-radius:3px; position: relative; @@ -108,10 +99,11 @@ h1{ text-align: center; padding-top:160px; display: block; + color: #00487D; } #dropbox .message i{ - color:#ccc; + color:#00487D; font-size:10px; } @@ -200,54 +192,4 @@ h1{ #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; -} +} \ No newline at end of file diff --git a/index.php b/index.php index 2e8ea9f..c635c9c 100644 --- a/index.php +++ b/index.php @@ -13,17 +13,12 @@
-

HTML5 File Upload with jQuery and PHP

+

NCA Screens

Drop images here to upload.
(they will only be visible to you)
- - diff --git a/js/upload.js b/js/upload.js index 9cb7a73..e2f0d0d 100644 --- a/js/upload.js +++ b/js/upload.js @@ -1,53 +1,101 @@ -var previewHtml = -'
' + - '' + - '' + - '' + - '
' + -'
'; +$(function(){ + var dropbox = $('#dropbox'), + message = $('.message', dropbox); + + dropbox.filedrop({ + // The name of the $_FILES entry: + paramname:'image', + + 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 = '
'+ + ''+ + ''+ + ''+ + ''+ + '
'+ + '
'+ + '
'+ + '
'; + + + function createImage(file){ -$('#drop').filedrop({ - url: 'upload.php', - paramname: 'file', - maxfiles: 4, - maxfilesize: 1, - - beforeEach: function(file) { - // alert('temp attempting upload') ; - }, - uploadStarted: function(i, file, len) { + var preview = $(template), + image = $('img', preview); + var reader = new FileReader(); - reader.onload = function(e) { - alert(e.target.result); - $('img',$(previewHtml)).attr('src', e.target.result); - } - + image.width = 100; + image.height = 100; + + 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); - $(previewHtml).appendTo($('#drop')); + + message.hide(); + preview.appendTo(dropbox); + + // Associating a preview container + // with the file, using jQuery's $.data(): + + $.data(file,preview); + } - $.data(file, $(previewHtml));l - }, - progressUpdated: function(i, file, progress) { - $.data(file).find('.progressBar').width(progress); - }, - uploadFinished: function(i, file, response, time) { - $.data(file).addClass('complete'); - }, + 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; - } - }, }); \ No newline at end of file