Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 222 lines (213 sloc) 10 KB
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML5 Drag & Drop Uploader</title>
<meta name="description" content="HTML5 Drag & Drop Uploader" />
<meta name="keywords" content="html5, drag drop, uploader, sample" />
<link type="text/plain" rel="author" href="http://gokercebeci.com/humans.txt" />
<link rel="shortcut icon" href="http://gokercebeci.com/favicon.ico" type="image/x-icon" />
<style>
body { padding: 20px 10px; color:#333; font: normal 12px sans-serif; }
#devcontainer { margin: 0 auto; width: 940px; }
.clear { clear: both; }
</style>
<!-- jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="devcontainer">
<!-- development area -->
<script src="droparea.js"></script>
<style>
.droparea {
position:relative;
text-align: center;
}
.multiple {
position:relative;
height: 20px;
}
.droparea div, .droparea input, .multiple div, .multiple input {
position: absolute;
top:0;
width: 100%;
height: 100%;
}
.droparea input, .multiple input {
cursor: pointer;
opacity: 0;
}
.droparea .instructions, .multiple .instructions {
border: 2px dashed #ddd;
opacity: .8;
}
.droparea .instructions.over, .multiple .instructions.over {
border: 2px dashed #000;
background: #ffa;
}
.droparea .progress, .multiple .progress {
position:absolute;
bottom: 0;
width: 100%;
height: 0;
color: #fff;
background: #6b0;
}
.multiple .progress {
width: 0;
height: 100%;
}
#areas { float: left; width: 480px; }
div.spot {
float: left;
margin: 0 20px 0 0;
width: 220px;
min-height: 345px;
}
.thumb {
float: left;
margin:0 20px 20px 0;
width: 140px;
min-height: 105px;
}
.desc {
float:right;
width: 460px;
}
.signature a { color:#555; text-decoration:none; }
.signature img { margin-right:5px; vertical-align: middle; }
input[type=text], textarea {
margin-bottom: 10px;
padding: 5px;
width: 288px;
height: 18px;
border: 1px solid #bbb;
}
textarea {
height: 58px;
}
input[type=submit] {
float: right;
margin-right: 20px;
padding: 5px 25px;
color: #111;
border: 1px solid #666;
background: #888;
}
h3 { clear: both; padding:5px 0; }
#sampleform { width: 470px; }
</style>
<div class="desc">
<p><b>droparea</b> is a HTML5 drag and drop image/file jQuery plug-in and a php script for server-side.</p>
<p>I added:</p>
<ul>
<li><b>client side image resizing with canvas on browser</b> option</li>
<li><b>data url</b> option for sending a file/image as a text field with ajax</li>
<li>click event for browsing files</li>
</ul>
<p>I developed it to use on my <a href="http://uygulama.net" title="web builder"><b>Uygulama</b></a> project's new version.</p>
<p>I've only tested it on</p>
<ul>
<li><b>Chromium (14.0.835.202)</b>,
<li><b>Google Chrome (15.0.874.120)</b>,</li>
<li><b>Mozilla Firefox (3.6.17)</b> "has some bugs"</li>
</ul>
<p>and it works enough for me for now!</p>
<br>
<p class="signature"><a href="http://gokercebeci.com/dev/" title="developer">
<img src="http://geticon.org/of/gokercebeci.com" alt="developer" />
goker.cebeci, the developer</a></p>
<p class="signature"><a href="https://github.com/gokercebeci/droparea">
<img src="http://geticon.org/of/github.com" alt="github" />
download or fork it on github</a></p>
<p class="signature"><a href="http://plugins.jquery.com/project/droparea">
<img src="http://geticon.org/of/jquery.com" alt="jquery" />
jQuery plugin page</a></p>
<br/>
<h3>USAGE</h3>
<div class="codeblock">
<code>&lt;input type="file" class="droparea" data-crop="true" ... /&gt;
<p>&lt;script&gt;<br/>$('.droparea').droparea([options]);<br/>&lt;/script&gt;</p></code>
</div>
<h3>DOC</h3>
<div class="codeblock">
If you want to post more data while uploading file, you can use <b>data</b> tag.
For example: <b>data-custom="custom-data"</b>.
<ul>
<li></code><b>data-width, data-height </b> : Optional but required for canvas resizing.<code></li>
<li></code><b>data-crop </b> : Optional. This is crop option for canvas resizing. [true/false]<code></li>
<li></code><b>data-canvas </b> : Canvas resizing option. Default value is <b>false</b>.<code></li>
<li></code><b>data-post </b> : Optional. This is an URL for directly posting.<code></li>
<li></code><b>data-type </b> : Optional. File tld. [<b>png, jpg, zip</b>] Separate with coma if more than one.<code></li>
</ul>
</div>
</div>
<div id="areas">
<input type="file" class="droparea spot" name="xfile" data-post="upload.php" data-width="220" data-height="345" data-crop="true"/>
<input type="file" class="droparea spot" name="xfile" data-post="upload.php" data-width="220" data-height="345" data-crop="true" data-canvas="true"/>
<div class="clear"></div>
<br/>
<b>* client side image resizing is enabled on the right area.</b>
<br/><br/>
<h3>SEND A FILE/IMAGE WITH AJAX FORM</h3>
<form id="sampleform" action="post.php" method="post">
<p>* file will be sent as a data url (base64) with a hidden input value when the form is submitted.</p>
<input type="file" class="droparea thumb" name="thumbnail" data-width="140" data-canvas="true">
<input type="text" name="title" value="sample title ..">
<textarea name="description">sample description ..</textarea>
<input type="submit" value="Submit">
</form>
<div id="form-result" class="clear">
<b>RESULT:</b>
</div>
<script>
$('#sampleform').submit(function(e){
e.preventDefault();
$.ajax({
url:$(this).attr('action'),
type:'post',
data:$(this).serialize(),
dataType:'json',
success:function(r){
$('#form-result').append(
'<div><b>Title: </b>'+r.title+'</div>'
,'<div><b>Description: </b>'+r.description+'</div>'
,'<div><b>Image/File: </b>'
+'<a href="'+ r.url +'" target="_blank">'+ r.url +'</a>'
+'</div>'
);
}
});
});
</script>
</div>
<script>
// Calling jQuery "droparea" plugin
$('.droparea').droparea({
'instructions': 'drop a file or click to here',
'init' : function(result){
//console.log('custom init',result);
},
'start' : function(area){
area.find('.error').remove();
},
'error' : function(result, input, area){
$('<div class="error">').html(result.error).prependTo(area);
return 0;
//console.log('custom error',result.error);
},
'complete' : function(result, file, input, area){
if((/image/i).test(file.type)){
area.find('img').remove();
//area.data('value',result.filename);
area.append($('<img>',{'src': result.path + result.filename + '?' + Math.random()}));
}
//console.log('custom complete',result);
}
});
</script>
<!-- /development area -->
</div>
</body>
</html>