Download
User Rating: 4.7/5 ( 2 votes)
jQuery Droparea is a HTML5 drag and drop image/file upload jQuery plug-in and a php script for server-side.
-
client side image resizing with canvas on browser option
-
data url option for sending a file/image as a text field with ajax
-
click event for browsing files
Browsers supported
-
Chromium (14.0.835.202),
-
Google Chrome (15.0.874.120),
-
Mozilla Firefox (3.6.17) "has some bugs"
Source: gokercebeci.com
1. INCLUDE JS FILES
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/droparea.js"></script>
2. HTML
<input type="file" class="droparea" name="thumbnail" data-width="140" data-canvas="true">
3. JAVASCRIPT
$('.droparea').droparea([options]);
4. OPTIONS
If you want to post more data while uploading file, you can use data tag.
For example: data-custom="custom-data".
data-width,
data-height : Optional but required for canvas resizing.
data-crop : Optional. This is crop option for canvas resizing. [true/false]
data-canvas : Canvas resizing option. Default value is false.
data-post : Optional. This is an URL for directly posting.
data-type : Optional. File tld. [png, jpg, zip] Separate with coma if more than one.
JS Tutorial
