🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).Originally it has:client-side image resizing with canvas on browser optiondata url option for sending a file/image as a text field with ajaxclick event for browsing files

Ajax Drag_Drop HTML5 Plugins

Documentation

Droparea

droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).

Originally it has:

  • 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

Tested on:

  • GoogleChrome (Linux; v. 23)
  • Mozilla Firefox (Linux; v. 17)

Usage

   <div class="droppable">     <input type="file" name="my_image" data-post="/upload_my_image?parent_model_id=7" data-crop="true" />   </div>    <script>       $('.droppable').droparea({         instructions: "",         start: function() {           alert('Let\'s rock!');         }       });   </script> 

Options available

Note: If you want to post more data while uploading a 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 direct posting. data-type   : Optional. File tld. [png, jpg, zip] Separate with coma if more than one. 

Contributors


You May Also Like