Без лишних слов приведу пример кода...
<html> <head> <script src="js/jquery-2.1.1.min.js"></script> <style> .dropzone { border : 1px dotted black; width: 400px; height: 400px; display: block; } .dropzone.act { border: 1px solid green; } </style> </head> <body> <div class="dropzone">Перетащите файлы сюда</div> <script> if(typeof(FormData) !== 'undefined') { $(document).on('dragover dragleave drop', '.dropzone', function(e) { var _this = $(this); var form_data = null; e.preventDefault(); e.stopPropagation(); switch(e.type) { case 'dragover' : _this.addClass('act'); break; case 'drop' : form_data = new FormData(); $.each(e.originalEvent.dataTransfer.files, function(k, file) { form_data.append("files[]", file); }); $.ajax({ url: '/index.php', data: form_data, dataType : 'text', processData: false, contentType: false, type: 'POST', success: function(data){ console.log(data); } }); case 'dragleave' : _this.removeClass('act'); break; } }); } else { alert("Upload via drag-n-drop not supported"); } </script> </body> </html>
На что нужно обратить внимание: