Статьи

HTML5 Drag and Drop загрузка

Декабрь 24, 2018

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

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

Под капотом

В этот механизм вовлечено несколько API-интерфейсов HTML 5:

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

API Файл обеспечивает доступ к файловой системе , вместо. В прежние 2000-е годы единственным способом загрузки файлов через HTTP был элемент <input type = «file»>: все решения были сосредоточены на украшении его формы, если только вы не хотели включать Flash или Java-апплет для выполнения той же работы. с большей гибкостью.

Файловый API также стал асинхронным во время работы: пользовательский интерфейс не зависает при доступе к файлам. Благодаря этому API вы можете начать сбор локального файла и указать обратный вызов, чтобы получить информацию о завершении операции.

XMLHttpRequest (объект для выполнения Ajax-запросов) также вступает в игру. Классический способ загрузки файлов включал элемент file <input>, минуя Ajax: элемент обычно был заключен в невидимый iframe для имитации асинхронного запроса. Фактически, запросы на загрузку файла — это просто запросы POST с правильными заголовками и телом сущности, содержащим кодировку base64 файла. Таким образом, теперь, когда мы можем получить доступ к содержимому файла программно, мы также можем загрузить его через Ajax.

Некоторые примеры и поддержка

У Mika Tuupola хорошая обучающая система по сравнению со старой версией Google Gears. На этот раз это все HTML 5. Он также показывает, как работать с серверной частью с помощью некоторого PHP-кода, хотя он ничем не отличается от стандартных загрузок (кроме того факта, что сгенерированный ответ читается через Ajax, поэтому это не обязательно для создания HTML-страницы.)

Buzzmedia содержит аналогичное руководство, но предоставляет информацию о поддержке браузера, обновленной до июня 2011 года:

  • Chrome и Firefox не имеют проблем , будучи первыми, которые поддерживают File API и со многими новыми, автоматически обновляемыми версиями (мы говорим о Firefox 3.6 как минимум, пока я работаю 7).
  • Safari 5 работает с другим API, который будет соответствовать стандарту Safari 6.
  • Internet Explorer 10 также будет поддерживать File API (это не заявление о намерениях: предварительная версия уже поддерживает).
  • Opera 11 поддерживает File API.

Drag and Drop API поддерживается всеми основными игроками (IE, Firefox, Chrome, Safari), за исключением Opera, которая ожидает, когда спецификация станет стабильной.

Мобильные браузеры иногда поддерживают File API (например, Android 3.0 и новее), но никогда не поддерживают Drag and Drop; Я не уверен, что это будет иметь смысл на дисплее телефона, хотя это было бы на экране планшета. Кстати, с политиками обновления сложнее работать на мобильных устройствах, поэтому для надежной загрузки большого количества файлов вам следует придерживаться собственных приложений.

Библиотека

 

Если вы хотите быстро интегрировать эту функциональность в свое приложение, библиотека JavaScript является хорошим выбором. Ничто на стороне сервера не изменится.

html5uploader позволяет вам указать некоторые элементы HTML для построения области загрузки с помощью одной строки JavaScript:

<!DOCTYPE html>  
<html>  
<head>  
        <meta charset="utf-8">  
        <title>HTML5</title>  
        <script src="html5uploader.js"></script>  
</head>  
<body onload="new uploader('drop', 'status', '/uploader.php', 'list');">  
        <div id="box">  
                <div id="status">Przeciągnij plik z lokalnego folderu do pojemnika ...</div>  
                <div id="drop"></div>  
        </div>  
        <div id="list"></div>  
</body>  
</html>

Конечно, вы можете заключить функцию в пространство имен, чтобы избежать конфликтов, или создать объект внутри $ () или вашего собственного обработчика загрузки. Посмотрите интерактивную демонстрацию html5uploader, чтобы понять, как работает этот процесс (он даже делает предварительный просмотр изображения, хотя это часть на стороне сервера).

40
Share: