Обнаружение локального файла drag'n'drop с помощью HTML/JavaScript

Существует текстовая область HTML. Я могу поймать это событие, когда локальный файл перетаскивается и помещается в текстовое поле. Но как получить имя отброшенного файла? (для окончательной модификации и вставки в текстовое поле).

Следующие выражения в этом случае возвращают None:

event.dataTransfer.files
event.dataTransfer.getData('text/plain')

Я сделал короткий пример для Firefox 3, который в настоящее время является моей целевой платформой.

<script>
function init() {
    document.getElementById('x').addEventListener('drop', onDrop, true)
}
function onDrop(event) {
    var data = event.dataTransfer.getData('text/plain')
    event.preventDefault()
    alert('files: ' + event.dataTransfer.files + ' && data: ' + data + '.')
}
</script>

<body onload='init()'>
<textarea cols=70 rows=20 id='x'></textarea>

Ответы

Ответ 1

Это немного поздно, но я думаю, что вы ищете:

event.dataTransfer.files[0].name

Вы также можете получить следующие свойства:

event.dataTransfer.files[0].size
event.dataTransfer.files[0].type

И вы можете прокручивать эти файлы со следующим:

var listOfNames='';
for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){
    listOfNames+=event.dataTransfer.files[i].name + '\r\n';
}

Btw - если вы используете jQuery, то объект dataTransfer можно найти здесь:

event.originalEvent.dataTransfer.files[0].name

Ответ 2

Не знаю, насколько это актуально, но я столкнулся с той же проблемой. Вот как я это решил:

  • Создайте обычную форму загрузки с одним полем ввода (type="file")

  • Добавьте этот атрибут HTML в поле ввода:

    dropzone = "copy file: image/png file: image/jpg file: image/jpeg"

  • Установите прослушиватель JQuery или что угодно, чтобы поймать "drop" -event в поле ввода

При перетаскивании локального изображения в поле ввода атрибут "значение" заполняется автоматически, и вы можете обрабатывать его, как и любую другую HTML-форму.

Я также обернул форму в другой элемент HTML (div), установил размер div и set overflow: скрытый через CSS - таким образом вы можете избавиться от кнопки "просмотреть". Это не приятно, но это работает. Я также использовал плагин AjaxForm для загрузки изображения в фоновом режиме - работает очень хорошо.

Ответ 3

насколько мне известно, вам нужно получить экземпляр nsIFile, чтобы получить путь к файлу (класс File не предлагает эту функцию).
На этой странице MDC объясняется, как это сделать: https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types#file.
Обратите внимание, что, хотя это не указано в предыдущей ссылке, получение экземпляра nsIFile требует повышения привилегий (см. Мой ответ на Могу ли я перетаскивать файлы с рабочего стола на область сбрасывания в Firefox 3.5 и инициировать загрузку? показать, как это сделать).

Ответ 4

im, делая это, обнаруживая наведение мыши и mousedown в зоне "Drop"

Ответ 5

Alemjerus прав, у вас нет доступа к тому, что вы ищете.

Поведение, о котором вы упоминали в ответ на его комментарий, является поведением некоторых браузеров по умолчанию. Например, с текстовой областью stackoverflow для этой записи, если я использую Safari и перетаскиваю в нее файл, он помещает путь к файлу в текстовое поле. С firefox 3.5, с другой стороны, он пытается открыть файл в браузере.

В принципе, функция "перетаскивания", которую вы пытаетесь реализовать, - это то, что обрабатывается браузером и ОС на клиентской машине - вы не можете использовать Javascript для этой цели.

Ответ 6

Вы не можете сделать это с помощью Javascript из соображений безопасности. Javascript VM не имеет прямого доступа к файловой системе ОС. Вы можете только перетаскивать текст.