HTML5 загрузки с помощью перетаскивания

Question

Кто-нибудь знает, как использовать HTML5 для загрузки файлов с помощью перетаскивания файлов с рабочего стола?Я нашел следующие ссылки:

1. Выбор файлов с помощью перетаскивания (2017-08) на developer.mozilla.org

2. Перетащите файл загрузки с использованием JavaScript В статье говорится, что API был изменен и ссылки на Файл API изменился (2010-09)

3. html5-drag-and-drop-множественный-файл-загрузка (2017-2011 возвращает 404) на http://www.appelsiini.net/ (все еще работает)

но есть ли решение, которое может работать на всех платформах: Firefox , Chrome и Safari ?

Большое спасибо!

Answer 1

Извините, на данный момент нет кросс-браузерного решения.

Текущие проблемы с реализацией браузера

FF, Safari, Chrome,IE (кросс-браузерные проблемы)

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

Firefox 3.6. *

Этот браузер поддерживает перетаскивание файлов, однако реализация, возможно, является наихудшей из когда-либо задуманных.Чтобы загрузить файл, который пользователь удалил, мы должны прочитать весь файл в память и затем отправить его через Ajax на наши серверы.Это прекрасно работает для капель около 10 МБ.Если вы попытаетесь выполнить ту же операцию с файлом размером 400 МБ, забудьте об этом!

Firefox 4. * (бета-версия)

Разработчики Mozilla - быстрые разработчики - они осознали проблему с их предыдущей реализацией и создали совершенно новый способ реализации загрузки с помощью перетаскивания.Объект FormData - это новый объект JavaScript, который позволяет веб-разработчику вставлять загружаемые файлы непосредственно в запрос Ajax без предварительного чтения файлов в память.Я был действительно взволнован этим и быстро загрузил Firefox 4, который находится во второй бета-версии.Проиграв с ним менее 5 минут, я настоятельно рекомендую вам еще не попробовать.Моя система стала невероятно нестабильной и медленной, а разработка была основной болью из-за отсутствия поддержки Firebug.

Chrome (последняя версия)

Этот браузер на сегодняшний день является лучшим в своей реализации!Простая и понятная моя единственная жалоба в том, что вы не можете загрузить папку и ее содержимое с помощью перетаскивания.

Safari 4. * & 5. *

Поскольку Safari построен на основе WebKit, как и Google Chrome, я ожидал, что он будет работать так же хорошо.Вау, я ошибся!Я пробовал это как в Safari 4, так и в Safari 5. Хотя перетаскивание нескольких файлов в окно работает, Safari отправляет первый файл несколько раз вместо отправки всех файлов.Разговор об ОСНОВНОЙ ошибке.Чтобы сделать его еще более интересным, если пользователь нажимает на место перетаскивания, он может выбрать несколько файлов для загрузки с помощью стандартного диалога выбора файлов - и это работает, как и ожидалось!Я не могу дождаться, когда Safari решит эту проблему.

Internet Explorer

Честно говоря, я даже не удосужился попробовать перетащить файлы в Internet Explorer.Попытка поддержать IE - это боль из-за отсутствия хороших инструментов разработки и несоответствующего движка JavaScript.Так как мне не удалось заставить все предпочтительные браузеры играть хорошо, я не могу себе представить, что Internet Explorer будет даже близко.

источник

Answer 2

Я бы вызывающе посмотрел на запуск Plupload.Он обеспечивает широкие возможности браузера и поддерживает множественное перетаскивание файлов в браузерах HTML5, которые поддерживают FileReader.

Допустим, например, что у вас нет html 5, он будет заменен на flash / gears / silverlight в зависимости от того, что этот человек установил.

Вот таблица совместимости: http://www.plupload.com/index.php

Имеется опция droparea: "somediv", которая позволяет перетаскивать файлы в нее и автоматически отслеживать загрузку файла.1009 * Дайте мне знать, если вам нужна помощь в настройке.

Answer 3

Вот простой пример. Если вы перетащите изображение поверх красного div, оно добавит изображение к телу. Я подтвердил, что он работает в IE11, Chrome 38 и Firefox 32. См. Эту статью Html5Rocks для более подробного объяснения.

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
<script>
    var dropZone = document.getElementById('dropZone');

    // Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
    dropZone.addEventListener('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });

    // Get file data on drop
    dropZone.addEventListener('drop', function(e) {
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files; // Array of all files
        for (var i=0, file; file=files[i]; i++) {
            if (file.type.match(/image.*/)) {
                var reader = new FileReader();
                reader.onload = function(e2) {
                    var img = document.createElement('img');
                    img.src= e2.target.result;
                    document.body.appendChild(img);
                }
                reader.readAsDataURL(file);
    }   }   });
</script>