Кроссбраузерная загрузка файлов с помощью Drag 'n Drop

@Proffessional · Регистрация: 16.07.2009

Студворк — интернет-сервис помощи студентам

Делаю "потянул и бросил" мультифайловую загрузку. Идея в том, что в тех браузерах, которые поддерживают D&D выводится поле, куда надо кинуть файлы. Скрипт узнаёт путь к файлу, и генерит форму которая его отправит на сервер классическим путём. Остальным показывается кнопка выбора файла. После драг-н-дропа нужно просто узнать пути дропнутых файлов. А вот с этим большие проблемы...

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
#dropZone{
    border: #333 solid 1px; 
    background:#CCC; padding:15px; 
    font-family:Arial, Helvetica, sans-serif;
}
.hover{
    background: #03F;
}
.drop{
    background:#009;
}
</style>
<body>
<form action="" enctype="multipart/form-data">
<div id="dropZone">
drop here
</div>
</form>
<div id="data"></div>
</body>
</html>

И сам скрипт, подключается внизу

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var dropZone = $('#dropZone');
if (typeof(window.FileReader) == 'undefined'){
    dropZone.text('Не поддерживается браузером!');
}
dropZone[0].ondragover = function() {
    dropZone.addClass('hover');
    dropZone.text('wowhoo!');
    return false;
};
    
dropZone[0].ondragleave = function() {
    dropZone.removeClass('hover');
    dropZone.text('drop here!');
    return false;
};
dropZone[0].ondrop = function(event){
    event.stopPropagation();
    event.preventDefault();
    event.returnValue = false;
    dropZone.removeClass('hover');
    dropZone.addClass('drop');
    window.i = event.dataTransfer;
    var dataStr;
    /*for (var i = 0; i<droppedFileInfo.length; i++){
        dataStr += droppedFileInfo[i];
    }*/
    alert(console.log(event.dataTransfer.getData('text')));
};

В Safari удаётся засунуть в event.dataTransfer.files необходимый файл, хотя typeof(window.FileReader) в нём 'undefined'. Но совершенно не удаётся получить о нём инфу через .detData(), возвращается пустая строка. В остальных браузерах вообще в files не оказывается ничего!

Ребята, мне очень нужно сделать эту штуку, правда, в js я почти ни бум бум..

Помогите, пожалуйста, как узнать системный путь к файлу?

@newJS · 08.12.2012, 06:05

Путь к файлу возвращает только осел остальные считают это дело опасным и не отдают.

@Proffessional · 08.12.2012, 12:09 **[ТС]**

newJS, но я видел примеры в которых активно используется getData. Его перестали поддерживать?
Я никак не пойму, в чём же я ошибся?
Может быть есть установки связи между полем input type="file" и другим html-элементом? Просто если бросить файл на поле file то без каких-либо скриптов в нём появляется его адрес, только как это использовать, ведь вид этого поля меня совсем не устраивает...

Добавлено через 2 минуты

Сообщение от newJS

Путь к файлу возвращает только осел остальные считают это дело опасным и не отдают.

Кстати, IE до сих пор не поддерживает D&D. Как же он может что-либо отдавать или не отдавать, когда у него нет таких возможностей? А?

Добавлено через 2 минуты
И вообще, неужели нет до сих пор нормального плагина под jQuery, скажем, для кросс-браузерной загрузки файлов? Чтоб поддерживал всё и сразу, и Flash, и multiple, и D&D?

Добавлено через 1 минуту
И вообще, неужели нет до сих пор нормального плагина под jQuery, скажем, для кросс-браузерной загрузки файлов? Чтоб поддерживал всё и сразу, и Flash, и multiple, и D&D?

Добавлено через 2 часа 23 минуты
Да, вот ещё есть решение
И, скажите, кто пользовался http://fineuploader.com/ ? Что должен отвечать скрипт для нормальной работы? Там по этому поводу ничего

@GuardCat · 08.12.2012, 13:50

Proffessional, для современных браузеров гуглите html5. Пример.

@Proffessional · 09.12.2012, 03:11 **[ТС]**

GuardCat, я уже всё перегуглил. Ничего нормально работающего не найдено!

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	08.12.2012, 06:05
	Путь к файлу возвращает только осел остальные считают это дело опасным и не отдают. 0

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	08.12.2012, 13:50
	Proffessional, для современных браузеров гуглите html5. Пример. 0

@Proffessional Особый статус 743 / 145 / 6 Регистрация: 16.07.2009 Сообщений: 2,185 Записей в блоге: 1
	09.12.2012, 03:11 [ТС]
	GuardCat, я уже всё перегуглил. Ничего нормально работающего не найдено! 0