Загрузка файла через Drag&Drop

Добрый день!

Подскажите пожалуйста, как реализована функция загрузки файлов, как на gmail-e. Там можно просто перетащить файл в определенную область и он автоматом начнет загружаться.
Надеюсь использовать в личных целях. Заранее благодарю.
0
загрузка файлов

1 ответов

Посмотрите, как это реализовано в SwellJS:

Перепишем код для выбора файла

<input type="file" multiple="multiple" /> в таком виде:


<form method="post" enctype="multipart/form-data" id="uploadform">
  <input type="file" name="dragupload[]" multiple="multiple"
 onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>
 
Элемент input может быть стилизован с нулевой прозрачностью и расположен над элементом, который принимает загрузки. Вся форма может располагаться в iframe для pseudo-AJAX загрузки, а элемент загрузки может быть скрытым слоем под слоем, на который "кидают" файлы.

Вариант с iframe выглядит так:

<script>
<!-- var entered = 0; -->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
  <form method="post" enctype="multipart/form-data" id="uploadform">
    Things can be dragged and dropped here!
    <input type="file" id="uploadelement" name="dragupload[]" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
  </form>
</body>
 
Это должно работать с Safari или Chrome, т.к. остальные браузеры не поддерживают drag-and-drop в элементы типа
<input type="file" /> и может использоваться в комбинации с HTML5-событием drop для Firefox 3.6+

Это приблизительный перевод ответа с другого сайта ©
2