Давайте подытожим один пример, прежде чем все эти ссылки прервутся =)
Когда вы перетаскиваете с помощью HTML5 DnD API , файл из вашего рабочего стола / файлового браузера в браузер:
- объект обратного вызова
drop имеет свойство dataTransfer.files
- , который является HTML5 File API
FileList объект
- , который содержит File API
File объекты.
С этого момента используйте File API, чтобы выполнить загрузку, которая уже описана во многих других местах.
Полный пример:
<div id="file-drop" style="border:1px dashed black; height:300px; width:300px;">Drop files here!</div>
<script>
var file_drop = document.getElementById('file-drop');
file_drop.addEventListener(
'dragover',
function handleDragOver(evt) {
evt.stopPropagation()
evt.preventDefault()
evt.dataTransfer.dropEffect = 'copy'
},
false
)
file_drop.addEventListener(
'drop',
function(evt) {
evt.stopPropagation()
evt.preventDefault()
var files = evt.dataTransfer.files // FileList object.
var file = files[0] // File object.
alert(file.name)
},
false
)
</script>
Fiddle .
Это предупредит базовое имя файла (путь не может быть получен из API файла).
Кстати, другой простой способ получить объект File - через атрибут .files IDL input type=file. Этот метод более удобен для небольших экранов, чем DnD, где вам нужно одновременно открыть два окна в хороших относительных положениях К сожалению, похоже, что в настоящее время перетаскивание в input type=file: перетаскивания файлов в стандартный ввод html-файлов не переносимо
Источник: http://www.html5rocks.com/en/tutorials/file/dndfiles/