Обнаружение локального файла drag'n'drop с HTML / JavaScript - PullRequest
Новая
       13

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

11 голосов
/ 07 января 2010

Существует текстовая область 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>

Ответы [ 6 ]

13 голосов
/ 27 сентября 2012

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

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';
}

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

event.originalEvent.dataTransfer.files[0].name
4 голосов
/ 06 марта 2012

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

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

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

    dropzone = "скопировать файл: файл изображения / png: файл изображения / jpg: файл изображения / jpeg"

  3. Установить JQuery-прослушиватель или что-то еще, чтобы перехватить событие "drop" в поле ввода

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

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

0 голосов
/ 17 января 2012

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

0 голосов
/ 09 марта 2010

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

0 голосов
/ 09 января 2010

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

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

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

0 голосов
/ 07 января 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...