In today’s article I would like to write about a very interesting functionality that can be developed using the latest html5 javascript.
In this article I would like to explain how to make a simple drag&drop script for uploading files, using the dragover and drop events that have been added with the new HTML5 javascript update. So again, this functionality will work only on HTML5 compatible web-browsers.

Ok, so let’ start creating our simple file upload functionality, first we will add the drag events:

  1. (function($){
  2.  $(document).ready(function(){
  3.   $('#dragzone').bind('dragover',function(event){
  4.                        $(event.target).css('background-color','red');
  5.    event.stopPropagation();
  6.    event.preventDefault();  
  7.   });
  8.   $('#dragzone').bind('drop',function(event){
  9.    $(event.target).css('background-color','white')
  10.    $.FileUpload($(event.target).attr('path'),event.originalEvent.dataTransfer.files);
  11.    event.stopPropagation();
  12.    event.preventDefault();
  13.   });
  14.  });
  15. })(jQuery);

Read more