en tr

goker.cebeci / droparea

DEVELOPMENT AREA

SAMPLE

jQuery DROPAREA v1.1.1

droparea is a HTML5 drag and drop image/file upload jQuery plug-in and a php script for server-side.

I added:

  • 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

I developed it to use on my Uygulama project's new version.

I've only tested it on

  • Chromium (14.0.835.202),
  • Google Chrome (15.0.874.120),
  • Mozilla Firefox (3.6.17) "has some bugs"

and it works enough for me for now!


developer goker.cebeci, the developer

github download or fork it on github

jquery jQuery plugin page

DROPAREA


* client side image resizing is enabled on the right area.

SEND A FILE/IMAGE WITH AJAX FORM

* file will be sent as a data url (base64) with a hidden input value when the form is submitted.

RESULT:

USAGE

<input type="file" class="droparea" data-crop="true" ... />

<script src="/data/dev/droparea/droparea.js"></script>
<script>
   $('.droparea').droparea([options]);
</script>

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.

/DEVELOPMENT AREA