Перетащите отбрасывание n от файловой системы в веб-приложение

Question

Перетащите отбрасывание n от файловой системы в веб-приложение

Я занимаюсь расследованиями на веб-платформе/техно, которая позволяет перетаскивать файлы отбрасывания n от файловой системы в веб-приложение. Цель состоит в том, чтобы, конечно, загрузить те файлы в сервер приложений.

В Flex это, кажется, не возможно (хотя это работает с AIR). Я нашел путь с Google Gears, но эту силу пользователь для установки Механизмов как плагина браузера.

С апплетом Java это, кажется, возможно, но это требует, чтобы пользователь принял исключение правила безопасности... (это странно для меня начиная с чтения файла, указанного пользователем через DnD, не "менее безопасно", чем если бы пользователь указал файл через стандартное классическое диалоговое окно Upload...).

Есть ли кто-либо не навязчивый способ позволить эту функцию, не устанавливая плагина и не принимая окно сообщения предупреждения системы безопасности?

6

web-applications file-upload drag-and-drop

задан anthonimous 5 March 2010 в 15:51

2 ответа

Другие вопросы по тегам:

web-applications file-upload drag-and-drop

Похожие вопросы:

score 4 · Answer 1

Нет.

Браузеры обычно не имеют встроенной поддержки такого рода.

4

ответ дан 16 December 2019 в 21:38

score 4 · Answer 2

Firefox 3.6 и, очевидно, последняя версия Safari (возможно, Webkit nightly) поддерживают это через HTML5. Я недавно поигрался с ним, и он работает очень хорошо. В примере, который я сделал, просто вставляются эскизы на страницу, но это можно настроить для загрузки данных на сервер. Вот код JavaScript / jquery, который я написал, не стесняйтесь использовать его:

function debug(string) {
  $("#debugArea").append(string);
}

$(function() {
  // We need to override the dragover event, otherwise Firefox will just open the file on drop
  $("#dropArea").bind("dragover", function(event) {
    event.preventDefault();
  });

  // This is where the actual magic happens :)
  $("#dropArea").bind("drop", function(event) {
    event.preventDefault();
    debug("Dropped something: ");
    // Since jquery returns its own event object, we need to get the original one in order to access the files
    var files = event.originalEvent.dataTransfer.files;
    // jquery nicely loops for us over the files
    $(files).each(function(index, file) {
     if(!file.type.match(/image.*/)) { // Skip non-images
        debug(file.name)
        debug(" <em>not an image, skipping</em>; ");
        return;
      }

      // We need a new filereader for every file, otherwise the reading might be canceled by the next file
      var filereader = new FileReader();
      filereader.onloadend = function(event) { $("#thumbnails").append("<img src='"+event.target.result+"' width='100px' />"); };
      debug(file.name);
      debug("; ");

      // Read the file in data URL format so that we can easily add it to an img tag.
      filereader.readAsDataURL(file);
    });
    debug("<br/><br/>");
  })

});

И HTML для него:

<div id="dropArea">
  <p>Drop images here!</p>
</div>
<div id="thumbnails">
</div>
<div id="debugArea">
  <strong>Debug Info:</strong><br/>
</div>