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

Question

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

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

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

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

Answer 1

No.

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

Answer 2

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

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> 

Answer 3

Это стало возможным благодаря использованию HTML5 File API.

• Многие готовые решения/примеры:
  • http://www.freshdesignweb.com/jquery-html5-file-upload.html
• библиотека для выполнения так быстро & легко:
  • https://code.google.com/p/html5uploader/
• Более технический учебник доступен здесь :
  • http://www.sitepoint.com/html5-file-drag-and-drop/ (demo)

Это возможно даже drag & drop folders.