Initial commit.
This commit is contained in:
commit
7db3b67067
6 changed files with 567 additions and 0 deletions
102
css/html5reset-1.6.1.css
Normal file
102
css/html5reset-1.6.1.css
Normal file
|
@ -0,0 +1,102 @@
|
||||||
|
/*
|
||||||
|
html5doctor.com Reset Stylesheet
|
||||||
|
v1.6.1
|
||||||
|
Last Updated: 2010-09-17
|
||||||
|
Author: Richard Clark - http://richclarkdesign.com
|
||||||
|
Twitter: @rich_clark
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
abbr, address, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, samp,
|
||||||
|
small, strong, sub, sup, var,
|
||||||
|
b, i,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
border:0;
|
||||||
|
outline:0;
|
||||||
|
font-size:100%;
|
||||||
|
vertical-align:baseline;
|
||||||
|
background:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
article,aside,details,figcaption,figure,
|
||||||
|
footer,header,hgroup,menu,nav,section {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
list-style:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote, q {
|
||||||
|
quotes:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content:'';
|
||||||
|
content:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
font-size:100%;
|
||||||
|
vertical-align:baseline;
|
||||||
|
background:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* change colours to suit your needs */
|
||||||
|
ins {
|
||||||
|
background-color:#ff9;
|
||||||
|
color:#000;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* change colours to suit your needs */
|
||||||
|
mark {
|
||||||
|
background-color:#ff9;
|
||||||
|
color:#000;
|
||||||
|
font-style:italic;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
del {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title], dfn[title] {
|
||||||
|
border-bottom:1px dotted;
|
||||||
|
cursor:help;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse:collapse;
|
||||||
|
border-spacing:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* change border colour to suit your needs */
|
||||||
|
hr {
|
||||||
|
display:block;
|
||||||
|
height:1px;
|
||||||
|
border:0;
|
||||||
|
border-top:1px solid #cccccc;
|
||||||
|
margin:1em 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select {
|
||||||
|
vertical-align:middle;
|
||||||
|
}
|
0
css/index.html
Normal file
0
css/index.html
Normal file
17
css/style.css
Normal file
17
css/style.css
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
body {
|
||||||
|
background-color: #00487D;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drop {
|
||||||
|
background-color: #0066B3;
|
||||||
|
height: 300px;
|
||||||
|
width: 800px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -150px;
|
||||||
|
margin-left: -400px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
/*width: 250px;
|
||||||
|
height: 70px;*/
|
||||||
|
}
|
53
index.php
Normal file
53
index.php
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<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/style.css" />
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="drop">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
|
||||||
|
<script src="js/jquery.filedrop.js"></script>
|
||||||
|
<script>
|
||||||
|
$('#drop').filedrop({
|
||||||
|
url: 'upload.php',
|
||||||
|
paramname: 'file',
|
||||||
|
maxfiles: 4,
|
||||||
|
maxfilesize: 1,
|
||||||
|
|
||||||
|
uploadFinished:function(i, file, response, time) {
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeEach: function(file) {
|
||||||
|
alert('temp attempting upload') ;
|
||||||
|
},
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
0
js/index.html
Normal file
0
js/index.html
Normal file
395
js/jquery.filedrop.js
Normal file
395
js/jquery.filedrop.js
Normal file
|
@ -0,0 +1,395 @@
|
||||||
|
/*
|
||||||
|
* Default text - jQuery plugin for html5 dragging files from desktop to browser
|
||||||
|
*
|
||||||
|
* Author: Weixi Yen
|
||||||
|
*
|
||||||
|
* Email: [Firstname][Lastname]@gmail.com
|
||||||
|
*
|
||||||
|
* Copyright (c) 2010 Resopollution
|
||||||
|
*
|
||||||
|
* Licensed under the MIT license:
|
||||||
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
|
*
|
||||||
|
* Project home:
|
||||||
|
* http://www.github.com/weixiyen/jquery-filedrop
|
||||||
|
*
|
||||||
|
* Version: 0.1.0
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* Allows sending of extra parameters with file.
|
||||||
|
* Works with Firefox 3.6+
|
||||||
|
* Future-compliant with HTML5 spec (will work with Webkit browsers and IE9)
|
||||||
|
* Usage:
|
||||||
|
* See README at project homepage
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
jQuery.event.props.push("dataTransfer");
|
||||||
|
|
||||||
|
var opts = {},
|
||||||
|
default_opts = {
|
||||||
|
url: '',
|
||||||
|
refresh: 1000,
|
||||||
|
paramname: 'userfile',
|
||||||
|
maxfiles: 25, // Ignored if queuefiles is set > 0
|
||||||
|
maxfilesize: 1, // MB file size limit
|
||||||
|
queuefiles: 0, // Max files before queueing (for large volume uploads)
|
||||||
|
queuewait: 200, // Queue wait time if full
|
||||||
|
data: {},
|
||||||
|
drop: empty,
|
||||||
|
dragEnter: empty,
|
||||||
|
dragOver: empty,
|
||||||
|
dragLeave: empty,
|
||||||
|
docEnter: empty,
|
||||||
|
docOver: empty,
|
||||||
|
docLeave: empty,
|
||||||
|
beforeEach: empty,
|
||||||
|
afterAll: empty,
|
||||||
|
rename: empty,
|
||||||
|
error: function(err, file, i) {
|
||||||
|
alert(err);
|
||||||
|
},
|
||||||
|
uploadStarted: empty,
|
||||||
|
uploadFinished: empty,
|
||||||
|
progressUpdated: empty,
|
||||||
|
speedUpdated: empty
|
||||||
|
},
|
||||||
|
errors = ["BrowserNotSupported", "TooManyFiles", "FileTooLarge"],
|
||||||
|
doc_leave_timer, stop_loop = false,
|
||||||
|
files_count = 0,
|
||||||
|
files;
|
||||||
|
|
||||||
|
$.fn.filedrop = function(options) {
|
||||||
|
opts = $.extend({}, default_opts, options);
|
||||||
|
|
||||||
|
this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
|
||||||
|
$(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
|
||||||
|
};
|
||||||
|
|
||||||
|
function drop(e) {
|
||||||
|
opts.drop(e);
|
||||||
|
files = e.dataTransfer.files;
|
||||||
|
if (files === null || files === undefined) {
|
||||||
|
opts.error(errors[0]);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
files_count = files.length;
|
||||||
|
upload();
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBuilder(filename, filedata, boundary) {
|
||||||
|
var dashdash = '--',
|
||||||
|
crlf = '\r\n',
|
||||||
|
builder = '';
|
||||||
|
|
||||||
|
if (opts.data) {
|
||||||
|
var params = $.param(opts.data).split(/&/);
|
||||||
|
|
||||||
|
$.each(params, function() {
|
||||||
|
var pair = this.split(/=/, 2);
|
||||||
|
var name = decodeURI(pair[0]);
|
||||||
|
var val = decodeURI(pair[1]);
|
||||||
|
|
||||||
|
builder += dashdash;
|
||||||
|
builder += boundary;
|
||||||
|
builder += crlf;
|
||||||
|
builder += 'Content-Disposition: form-data; name="' + name + '"';
|
||||||
|
builder += crlf;
|
||||||
|
builder += crlf;
|
||||||
|
builder += val;
|
||||||
|
builder += crlf;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
builder += dashdash;
|
||||||
|
builder += boundary;
|
||||||
|
builder += crlf;
|
||||||
|
builder += 'Content-Disposition: form-data; name="' + opts.paramname + '"';
|
||||||
|
builder += '; filename="' + filename + '"';
|
||||||
|
builder += crlf;
|
||||||
|
|
||||||
|
builder += 'Content-Type: application/octet-stream';
|
||||||
|
builder += crlf;
|
||||||
|
builder += crlf;
|
||||||
|
|
||||||
|
builder += filedata;
|
||||||
|
builder += crlf;
|
||||||
|
|
||||||
|
builder += dashdash;
|
||||||
|
builder += boundary;
|
||||||
|
builder += dashdash;
|
||||||
|
builder += crlf;
|
||||||
|
return builder;
|
||||||
|
}
|
||||||
|
|
||||||
|
function progress(e) {
|
||||||
|
if (e.lengthComputable) {
|
||||||
|
var percentage = Math.round((e.loaded * 100) / e.total);
|
||||||
|
if (this.currentProgress != percentage) {
|
||||||
|
|
||||||
|
this.currentProgress = percentage;
|
||||||
|
opts.progressUpdated(this.index, this.file, this.currentProgress);
|
||||||
|
|
||||||
|
var elapsed = new Date().getTime();
|
||||||
|
var diffTime = elapsed - this.currentStart;
|
||||||
|
if (diffTime >= opts.refresh) {
|
||||||
|
var diffData = e.loaded - this.startData;
|
||||||
|
var speed = diffData / diffTime; // KB per second
|
||||||
|
opts.speedUpdated(this.index, this.file, speed);
|
||||||
|
this.startData = e.loaded;
|
||||||
|
this.currentStart = elapsed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Respond to an upload
|
||||||
|
function upload() {
|
||||||
|
|
||||||
|
stop_loop = false;
|
||||||
|
|
||||||
|
if (!files) {
|
||||||
|
opts.error(errors[0]);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var filesDone = 0,
|
||||||
|
filesRejected = 0;
|
||||||
|
|
||||||
|
if (files_count > opts.maxfiles && opts.queuefiles === 0) {
|
||||||
|
opts.error(errors[1]);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Define queues to manage upload process
|
||||||
|
var workQueue = [];
|
||||||
|
var processingQueue = [];
|
||||||
|
var doneQueue = [];
|
||||||
|
|
||||||
|
// Add everything to the workQueue
|
||||||
|
for (var i = 0; i < files_count; i++) {
|
||||||
|
workQueue.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to enable pause of processing to wait
|
||||||
|
// for in process queue to complete
|
||||||
|
var pause = function(timeout) {
|
||||||
|
setTimeout(process, timeout);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process an upload, recursive
|
||||||
|
var process = function() {
|
||||||
|
|
||||||
|
var fileIndex;
|
||||||
|
|
||||||
|
if (stop_loop) return false;
|
||||||
|
|
||||||
|
// Check to see if are in queue mode
|
||||||
|
if (opts.queuefiles > 0 && processingQueue.length >= opts.queuefiles) {
|
||||||
|
|
||||||
|
return pause(opts.queuewait);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// Take first thing off work queue
|
||||||
|
fileIndex = workQueue[0];
|
||||||
|
workQueue.splice(0, 1);
|
||||||
|
|
||||||
|
// Add to processing queue
|
||||||
|
processingQueue.push(fileIndex);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (beforeEach(files[fileIndex]) != false) {
|
||||||
|
if (fileIndex === files_count) return;
|
||||||
|
var reader = new FileReader(),
|
||||||
|
max_file_size = 1048576 * opts.maxfilesize;
|
||||||
|
|
||||||
|
reader.index = fileIndex;
|
||||||
|
if (files[fileIndex].size > max_file_size) {
|
||||||
|
opts.error(errors[2], files[fileIndex], fileIndex);
|
||||||
|
// Remove from queue
|
||||||
|
processingQueue.forEach(function(value, key) {
|
||||||
|
if (value === fileIndex) processingQueue.splice(key, 1);
|
||||||
|
});
|
||||||
|
filesRejected++;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
reader.onloadend = send;
|
||||||
|
reader.readAsBinaryString(files[fileIndex]);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
filesRejected++;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
// Remove from queue
|
||||||
|
processingQueue.forEach(function(value, key) {
|
||||||
|
if (value === fileIndex) processingQueue.splice(key, 1);
|
||||||
|
});
|
||||||
|
opts.error(errors[0]);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we still have work to do,
|
||||||
|
if (workQueue.length > 0) {
|
||||||
|
process();
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var send = function(e) {
|
||||||
|
|
||||||
|
var fileIndex = ((typeof(e.srcElement) === "undefined") ? e.target : e.srcElement).index
|
||||||
|
|
||||||
|
// Sometimes the index is not attached to the
|
||||||
|
// event object. Find it by size. Hack for sure.
|
||||||
|
if (e.target.index == undefined) {
|
||||||
|
e.target.index = getIndexBySize(e.total);
|
||||||
|
}
|
||||||
|
|
||||||
|
var xhr = new XMLHttpRequest(),
|
||||||
|
upload = xhr.upload,
|
||||||
|
file = files[e.target.index],
|
||||||
|
index = e.target.index,
|
||||||
|
start_time = new Date().getTime(),
|
||||||
|
boundary = '------multipartformboundary' + (new Date).getTime(),
|
||||||
|
builder;
|
||||||
|
|
||||||
|
newName = rename(file.name);
|
||||||
|
if (typeof newName === "string") {
|
||||||
|
builder = getBuilder(newName, e.target.result, boundary);
|
||||||
|
} else {
|
||||||
|
builder = getBuilder(file.name, e.target.result, boundary);
|
||||||
|
}
|
||||||
|
|
||||||
|
upload.index = index;
|
||||||
|
upload.file = file;
|
||||||
|
upload.downloadStartTime = start_time;
|
||||||
|
upload.currentStart = start_time;
|
||||||
|
upload.currentProgress = 0;
|
||||||
|
upload.startData = 0;
|
||||||
|
upload.addEventListener("progress", progress, false);
|
||||||
|
|
||||||
|
xhr.open("POST", opts.url, true);
|
||||||
|
xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
|
||||||
|
|
||||||
|
xhr.sendAsBinary(builder);
|
||||||
|
|
||||||
|
opts.uploadStarted(index, file, files_count);
|
||||||
|
|
||||||
|
xhr.onload = function() {
|
||||||
|
if (xhr.responseText) {
|
||||||
|
var now = new Date().getTime(),
|
||||||
|
timeDiff = now - start_time,
|
||||||
|
result = opts.uploadFinished(index, file, jQuery.parseJSON(xhr.responseText), timeDiff);
|
||||||
|
filesDone++;
|
||||||
|
|
||||||
|
// Remove from processing queue
|
||||||
|
processingQueue.forEach(function(value, key) {
|
||||||
|
if (value === fileIndex) processingQueue.splice(key, 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add to donequeue
|
||||||
|
doneQueue.push(fileIndex);
|
||||||
|
|
||||||
|
if (filesDone == files_count - filesRejected) {
|
||||||
|
afterAll();
|
||||||
|
}
|
||||||
|
if (result === false) stop_loop = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initiate the processing loop
|
||||||
|
process();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIndexBySize(size) {
|
||||||
|
for (var i = 0; i < files_count; i++) {
|
||||||
|
if (files[i].size == size) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function rename(name) {
|
||||||
|
return opts.rename(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
function beforeEach(file) {
|
||||||
|
return opts.beforeEach(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
function afterAll() {
|
||||||
|
return opts.afterAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragEnter(e) {
|
||||||
|
clearTimeout(doc_leave_timer);
|
||||||
|
e.preventDefault();
|
||||||
|
opts.dragEnter(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragOver(e) {
|
||||||
|
clearTimeout(doc_leave_timer);
|
||||||
|
e.preventDefault();
|
||||||
|
opts.docOver(e);
|
||||||
|
opts.dragOver(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragLeave(e) {
|
||||||
|
clearTimeout(doc_leave_timer);
|
||||||
|
opts.dragLeave(e);
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
function docDrop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
opts.docLeave(e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function docEnter(e) {
|
||||||
|
clearTimeout(doc_leave_timer);
|
||||||
|
e.preventDefault();
|
||||||
|
opts.docEnter(e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function docOver(e) {
|
||||||
|
clearTimeout(doc_leave_timer);
|
||||||
|
e.preventDefault();
|
||||||
|
opts.docOver(e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function docLeave(e) {
|
||||||
|
doc_leave_timer = setTimeout(function() {
|
||||||
|
opts.docLeave(e);
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
function empty() {}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (XMLHttpRequest.prototype.sendAsBinary) return;
|
||||||
|
XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
|
||||||
|
function byteValue(x) {
|
||||||
|
return x.charCodeAt(0) & 0xff;
|
||||||
|
}
|
||||||
|
var ords = Array.prototype.map.call(datastr, byteValue);
|
||||||
|
var ui8a = new Uint8Array(ords);
|
||||||
|
this.send(ui8a.buffer);
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
})(jQuery);
|
Loading…
Reference in a new issue