В продолжение статьи о новинках в html5, вот нашёл демо где уже работает загрузка файлов обычным перетаскиванием в браузер Firefox 3.6. Обычный drag-n-drop файлов пока в стабильных браузерах максимально что могут — создать события аналогичные перетаскиванию dom-элементов в определённые контейнеры.

Если взглянуть в код, то можно заметить что у события появляются такие параметры и методы:

event.dataTransfer.files event.dataTransfer.mozTypesAt(0) event.dataTransfer.files[0].getAsBinary()

А для отсылки файла используется обычный аяксный объект у которого появляется метод sendAsBinary(). Вобщем пока это выглядит как хак и видимо что надо больше внимания уделить спецификации html5, что-бы пользователь случайно не загрузил весь C:\Windows, что-бы можно было временно отложить загрузку или отфильтровать что конкретно надо загружать, или до какой глубины надо структуру подгружать и как обрабатывать.

Jquery dnd-upload

Написал два jquery-плагина - один для поддержки Firefox 3.6 (Namoroka) HTML5 загрузки, другой для поддержки Google gears. Можно использовать оба вместе..

Самый простой вариант для gears:

$('#drop_area').uploadg({gate:'http://somesite.com/upload_here_path/'});

Заметьте что ключ получаемого у сервера файла будет "file" (в пхп соответсвенно $_FILES['file']). А вот расширенный пример кода инициализации..

var dragndropConfig={
  beforeLoad:function(){
    this.gate=some_dynamic_file_upload_url+'?parentID='+SomeOtherDynamicObject.ID;
    if(SomeDisableReason){
      this.can_proceed=false;
    }
  },
  onProgress:function(event) {
    if (event.lengthComputable) {
      var percentage = Math.round((event.loaded * 100) / event.total);
      if (percentage &lt; 100) {
        $('#some_progress_div').html('Uploading file..'+percentage+'%');
      }
    }
  },
  onComplete:function(event,txt) { 
           $('#some_progress_div').html('done');
  }
};
if (window.google && google.gears){
  $('#drop_area').uploadg(dragndropConfig);
}
else{
  $('#drop_area').upload5(dragndropConfig);
}

Осторожно, Google gears всё ещё имеют баги связанные с такой загрузкой.

Совершенно верно, и не будет тащиться.
Берём RFC 2388, ищем там пункт 4.4 и читаем: «…if the file name of the sender's operating system is not in US-ASCII, the file name might be approximated, or encoded using the method of RFC 2231»
Я использовал функцию encodeURIComponent, чтобы закодировать имя файла в строке Content-Disposition, и успешно передал на сервер файл с русскими буквами в имени. Я, правда, не уверен, что сделал всё верно, так как на стороне сервера мне пришлось использовать функцию urldecode, чтобы добыть имя файла.

Drag-n-drop file upload

Jquery dnd-upload

Файлы

Ваш ответ

Комментарии

Nicolo написал №1 ~ 767 дней назад в 15:05, Четверг 15 Апреля 2010 Really like this !! Congrats

Саша написал №2 ~ 666 дней назад в 23:11, Воскресенье 25 Июля 2010 Только вот если файл имеет русские символы,то нифига он не тащится