Перетащить файл в браузер

Обновлено: 07.07.2024

Перетаскивание файлов из рабочего стола в браузер одна из наиболее интересных возможностей HTML5. Я опишу как:

Поддержка браузеров

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

HTML и CSS

Далее идет код стандартной формы с инпутом типа файл. Единственное HTML5 нововведение в форме это атрибут "multiple" который позволяет пользователю выбирать любое количество файлов.

Со стороны сервера загрузка файлов будет проводиться средствани PHP, но независимо от того какую технологию вы используете на сервере JavaScript код останется тем же. Скрытое поле MAX_FILE_SIZE определяет 300,000 байт, размер будем проверять и на стороне клиента и на стороне сервера, чтобы предотвротить загрузку огромного размера файлов.

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

File API

W3C File API предостовляет несколько объектов которые мы будем использовать:

• FileList: предостовляет массив выбранных файлов.
• File: предстовляет единственный файл.
• FileReader: интерфейс который позволяет нам считать информацию о файле со стороны клиента и использовать в JavaScript.

JavaScript события

Далее проверим поддержку File API и вызовем функцию инициализации Init():

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

Изменение стилей при переносе

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

Анализирование перетащенных или выбранных файлов

1. Вызываем функцию FileDragHover() чтобы убрать стиля при hover и предотвратить выполнение событий браузера. Это очень важно, так как браузер может попытаться отобразить файл
2. Проходимся по объекту FileList.
3. Наконец функция проходит по всем объектам типа File в объекте FileList и передает их как аргумент в функцию ParseFile()

Функция выводит информация используя три основные свойства представленные объектом File только для чтения.

Загрузка файлов перетаскиванием в окно браузера

Практически все современные web-сервисы предлагают пользователям такую фичу, как загрузку файлов простым перетаскиванием их в браузер. Это действительно очень удобно, когда надо загрузить сразу несколько файлов, поле загрузки может иметь произвольный вид и форму, т.к. не подвязано на стандартные элементы формы, и еще множество других плюсов. Как же это сделано? Очень просто. Мы уже рассматривали в одной из статей прием и отправку текстовых данных при помощи технологии AJAX, загрузка файлов выполняется не намного сложнее.

Для начала определим какую-нибудь область на HTML-странице, на которую мы будем перетаскивать файлы. Это очень просто:

В стилях "зону выгрузки" определите как вам нравится. Кроме того, в качестве "зоны выгрузки" может быть, например, картинка или любой другой элемент HTML. Теперь надо установить на этот элемент обработчики событий, соответствующие перетаскиванию файлов. Это ondragenter - заход на элемент курсора мыши при перетаскивании, ondragover - движение мыши над элементом, ondragleave - выход мыши за пределы элемента при перетаскивании или же сам процесс перетаскивания, ondrop - собственно, интересующее нас событие - само перетаскивание файлов на "зону выгрузки". Для установки обработчиков можно пойти по красивому пути MVC, устанавливая их при загрузке страницы, я же для наглядности сделаю inline-обрабточики.

1. < div class= "drag" id = "drag"
2. ondragenter = "dropenter(event);" ondragover = "dropenter(event);"
3. ondragleave = "dropleave();" ondrop = "return dodrop(event);" >
4. Drop - zone
5. </ div >

Обратите внимание, что обработчикам dropenter и dropleave передаются описания события event, это нужно, чтобы в функции обработки их можно было подавить. Кроме подавления на этот обработчик можно повесить какой-нибудь полезный эффект, например, чтобы "зона выгрузки" меняла цвет при заходе на нее курсора с перетаскиваемыми файлами. Обработчик dropleave может отсутствовать, он нужен только если используется визуальный эффект при заходе курсора. При выходе курсора за пределы "зоны выгрузки" она вновь принимает свой первоначальный вид. Подавлять это событие в обработчике также не надо. Теперь первый из главных обработчиков - загрузка файлов после их "броска" на "зону выгрузки". Этот вариант обработчика кроссбраузерный, он поддерживает не только браузеры на движке Mozilla и WebKit, но также Opera и Internet Explorer. После передачи всех файлов AJAX-загрузчику, обработчик должен обязательно подавить событие, иначе все файлы вместо загрузки будут открыты как страницы. Ну или еще как-нибудь, в зависимости от типа браузера. В этом обработчике можно выполнять предварительную проверку на размер файла и его расширение, чтобы сэкономить время и ресурсы серверной стороны. Некоторые браузеры передают в обработчик отдельным полем MIME-тип загружаемых файлов, но ориентироваться на эту информацию при проверке не стоит. Равно как и не надо целиком доверять проверке на стороне клиента, она сделана исключительно для удобства пользователей, но не как защита от злоумышленников. Серверная обработка полученных данных остается всеобъемлющей.

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

В этой статье расмотрим первые три пункта. В итоге получим примерно такую форму:

Поддержка браузеров

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

HTML и CSS

Далее идет код стандартной формы с инпутом типа файл. Единственное HTML5 нововведение в форме это атрибут “multiple” который позволяет пользователю выбирать любое количество файлов.

Со стороны сервера загрузка файлов будет проводиться средствани PHP, но независимо от того какую технологию вы используете на сервере JavaScript код останется тем же. Скрытое поле MAX_FILE_SIZE определяет 300,000 байт, размер будем проверять и на стороне клиента и на стороне сервера, чтобы предотвротить загрузку огромного размера файлов.

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

File API

W3C File API предостовляет несколько объектов которые мы будем использовать:

• FileList: предостовляет массив выбранных файлов.
• File: предстовляет единственный файл.
• FileReader: интерфейс который позволяет нам считать информацию о файле со стороны клиента и использовать в JavaScript.

JavaScript события

Функция Init():

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

Изменение стилей при переносе

Мало кто испытал перетаскивание файлов в браузер. На самом деле, многие опытные интернет пользователи считают это невозможным. Поэтому написали внутри элемента “перетащите сюда файлы”. А следующая функция будет добвлять класс к элементу, когда файл уже будет находится непосредственно над элементом, тем самым будут меняться стили.

Анализирование перетащенных или выбранных файлов

1. Вызываем функцию FileDragHover() чтобы убрать стиля при hover и предотвратить выполнение событий браузера. Это очень важно, так как браузер может попытаться отобразить файл.
2. Проходимся по объекту FileList.
3. Наконец функция проходит по всем объектам типа File в объекте FileList и передает их как аргумент в функцию ParseFile().

Функция выводит информация используя три основные свойства представленные объектом File только для чтения.

• .name: имя файла (не включая путь к файлу)
• .type: MIME тип, например: image/jpeg, text/plain, и т.д.
• .size: размер файла в байтах

Ну вот как то так!

Не забываем подписывать на новые статьи на блоге, а так же комментировать статьи или задавть вопросы, если что не понятно.

От автора: достаточно часто при создании сайтов необходимо загружать на сервер различные файлы. К примеру, документы, архивы или изображения. При этом стандартный загрузчик файлов форм не совсем удобен, да и не вписывается в дизайн современных сайтов. Поэтому в данном уроке мы с Вами начнем создавать механизм загрузки файлов на сервер путем перетаскивания.

Введение

Загрузка фалов на сервер, достаточно распространенная задача в сайтостроении, и в большинстве случаев она решается путем добавления на страницу стандартного поля формы file:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

В данном уроке мы с Вами начнем создавать механизм загрузки файлов на сервер путем перетаскивания, и поможет нам в этом один из виджетов библиотеки Formstone – Upload, который как раз разработан для этих целей (официальный сайт библиотеки //formstone.it/).

Виджет Upload

Итак, на тестовой странице удаляем элемент формы file и вместо него располагаем обычный блок

Полный код тестовой страницы:

Обратите внимание, на данной странице уже подключена библиотека jQuery и ядро библиотеки Formstone. Далее подключаем виджет и его файл стилей (в файловой структуре тестовой страницы уже содержатся данные элементы).

Теперь необходимо, при помощи библиотеки jQuery выбрать блок, который служит областью приема файлов и вызвать метод upload():

Теперь давайте перейдем в браузер и посмотрим, что изменилось:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Теперь необходимо указать некоторые настройки:

Основные настройки виджета:

action – файл на сервере, который обработает переданные данные(сохранит файл на сервере);

label – строка которая отображается в приемнике файлов;

postKey – имя поля в запросе;

maxSize – максимальный размер передаваемого файла;

Теперь необходимо создать файл обработчик, который выполнит сохранение передаваемого файла.

Скрипт обработчик.

Скрипт обработчик, должен принять данные и выполнить определенные манипуляции, в нашем случае – сохранить передаваемые файлы в определенную папку сервера. Поэтому создаем новый файл obr.php и добавляем следующий код:

if ( move_uploaded_file ( $_FILES [ 'newfile' ] [ 'tmp_name' ] , 'uploads/' . $_FILES [ 'newfile' ] [ 'name' ] ) ) <

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

На этом данный урок завершен. Основной функционал скрипта мы с Вами реализовали и в следующем уроке мы займемся выводом на экран результатов загрузки файлов.

Всего Вам доброго и удачного кодирования.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Читайте также:

  
• Как провести залог в 1с проводки
  
• 1с чем отличается список значений от таблицы значений
  
• Программа для отслеживания контейнеров на iphone
  
• Как изменить в счет в 1с
  
• Как называются строки в ворде