Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 222 lines (213 sloc) 10 KB
<html lang="en">
<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="" />
<link rel="shortcut icon" href="" type="image/x-icon" />
body { padding: 20px 10px; color:#333; font: normal 12px sans-serif; }
#devcontainer { margin: 0 auto; width: 940px; }
.clear { clear: both; }
<!-- jquery -->
<script src="" type="text/javascript"></script>
<div id="devcontainer">
<!-- development area -->
<script src="droparea.js"></script>
.droparea {
text-align: center;
.multiple {
height: 20px;
.droparea div, .droparea input, .multiple div, .multiple input {
position: absolute;
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 {
bottom: 0;
width: 100%;
height: 0;
color: #fff;
background: #6b0;
.multiple .progress {
width: 0;
height: 100%;
#areas { float: left; width: 480px; } {
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 {
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; }
<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>
<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>
<p>I developed it to use on my <a href="" title="web builder"><b>Uygulama</b></a> project's new version.</p>
<p>I've only tested it on</p>
<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>
<p>and it works enough for me for now!</p>
<p class="signature"><a href="" title="developer">
<img src="" alt="developer" />
goker.cebeci, the developer</a></p>
<p class="signature"><a href="">
<img src="" alt="github" />
download or fork it on github</a></p>
<p class="signature"><a href="">
<img src="" alt="jquery" />
jQuery plugin page</a></p>
<div class="codeblock">
<code>&lt;input type="file" class="droparea" data-crop="true" ... /&gt;
<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>.
<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>
<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>
<b>* client side image resizing is enabled on the right area.</b>
<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">
<div id="form-result" class="clear">
'<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>'
// Calling jQuery "droparea" plugin
'instructions': 'drop a file or click to here',
'init' : function(result){
//console.log('custom init',result);
'start' : function(area){
'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){
area.append($('<img>',{'src': result.path + result.filename + '?' + Math.random()}));
//console.log('custom complete',result);
<!-- /development area -->