Сделайте перетаскивание div для загрузки файлов, чтобы он работал как тип ввода = «файл»

. Я пытаюсь реализовать нативную загрузку нескольких файлов HTML5 с помощью перетаскивания. Я следил за учебниками, такими какhttp://onehub.com/blog/posts/designing-an-html5-drag-drop-file-uploader-using-sinatra-and-jquery-part-1/ иhttp://www.html5rocks.com/en/tutorials/file/dndfiles/ но я так и не нашел нужного мне решения.

По сути, я хочу имитировать функциональность элемента ввода для загрузки нескольких файлов HTML5, но с помощью div на ведьме я прослушиваю события перетаскивания.

Другими словами, я хочу сделать форму, подобную этой:

     
     

         
Drop files here
     
     

Работать так, как будто она была сделана вот так:

Поле перетаскивания должно рассматриваться как часть формы, и когда форма отправляется, Я хочу только, чтобы все данные из входов, а также массив файлов из поля перетаскивания были отправлены через AJAX на сервер.

До сих пор я реализовал только чтение имен файлов по событию перетаскивания. Я хочу, чтобы все удаленные файлы были добавлены в массив,но я не знаю, как получить доступ к самим файлам, а не к их атрибутам, чтобы последний мог отправить этот массив файлов при отправке формы через AJAX вместе с остальными данными формы.

Я хочу что-то вроде:

var data = e.originalEvent.dataTransfer,
               files = data.files,
               filesArray = [],
               filesLength = files.length,
               i;


        for ( i = 0; i < filesLength; i++ ) {
            var file = files[i];
            filesArray.push(file); 
        }

 return filesArray;

Кроме того, я знаю, что для этого есть плагины, но я хочу сделать это нативным.