Jquery добавить файл в input file

Обновлено: 04.07.2024

Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента <input> или drag and drop.

Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.

Доступ к выбранным файлам

Рассмотрим следующий код:

File API делает возможным доступ к FileList , который содержит объекты File , которым соответствуют файлы, выбранные пользователем.

Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.

Обращение к одному выбранному файлу с использованием классической DOM-модели:

Обращение к одному выбранному файлу через jQuery:

Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"

Доступ к выбранным файлам через событие change

Также возможно (но не обязательно) получить доступ к FileList через событие change . Нужно использовать EventTarget.addEventListener() чтобы добавить обработчик события change , как показано здесь:

Обработчик события change можно назначить атрибутом элемента:

Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом FileList , который состоит из объектов File , представляющих файлы, выбранные пользователем.

Получение информации о выделенных файлах

Объект FileList предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект File . Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины ( length ) списка файлов:

Конкретные объекты File могут быть получены обращением к списку файлов как к массиву:

Этот цикл проходит по всем файлам в списке файлов.

Всего существует три атрибута, предоставляемых объектом File , которые содержат полезную информацию о файле.

name Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути. size Размер файла в байтах, как 64-битное целое число (возможно только чтение). type MIME тип файла, как строка доступная только для чтения, или пустая строка ( "") если тип файла не может быть определён.

Пример: Отображение размера файла(ов)

Следующий пример показывает возможное использование свойства size :

Использование метода click() скрытых элементов выбора файла

Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), вы можете скрыть непривлекательный элемент <input> и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input значение none (display:none) и вызывая метод click() скрытого элемента <input> .

Рассмотрим следующую разметку HTML:

Код, обрабатывающий событие click, может выглядеть следующим образом:

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

Использование элемента label скрытого элемента input

Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом <label> .

Рассмотрим следующую разметку HTML:

В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click() . Также в данном случае вы можете стилизовать элемент label так, как пожелаете.

Выбор файлов с использованием технологии drag and drop

Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.

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

В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter , dragover и drop .

В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover , таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:

Вся настоящая магия происходит в функции drop() :

Здесь мы извлекаем из события поле dataTransfer , затем вытаскиваем из него список файлов и передаём этот список в handleFiles() . После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.

Пример: Отображение эскизов изображений, выбранных пользователем

Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.

Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке " image.* "). Для каждого файла, который является изображением, мы создаём новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.

Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав File ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем Node.appendChild() для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.

Затем мы устанавливаем FileReader для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader , мы настраиваем его функцию onload , затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передаётся в колбэк onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.

Использование URLs объектов

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) представляет поддержку для методов DOM window.URL.createObjectURL() (en-US) и window.URL.revokeObjectURL() (en-US) . Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM File , включая локальные файлы на компьютере пользователя.

Когда у вас есть объект File , на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:

URL объекта – это строка, идентифицирующая объект файла File . Каждый раз при вызове window.URL.createObjectURL() (en-US) , создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом window.URL.revokeObjectURL() (en-US) :

Пример: Использование URL объектов для отображения изображений

Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете посмотреть работающий пример.

HTML, который представляет интерфейс, выглядит так:

Здесь определяется элемент файла <input> , а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе Использование метода click() скрытых элементов выбора файла, как о методе вызова окна выбора файла.

Метод handleFiles() может быть реализован таким образом:

Он начинается с получения элемента <div> с ID fileList . Это блок, в который мы вставим наш список файлов, включая эскизы..

Если объект FileList , передаваемый в handleFiles() является null , то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:

  1. Создаётся новый элемент - неупорядоченный список ( <ul> ).
  2. Этот новый элемент вставляется в блок <div> с помощью вызова его метода element.appendChild() .
  3. Для каждого File в FileList , представляемого files :
    1. Создаём новый элемент пункта списка ( <li> ) и вставляем его в список.
    2. Создаём новый элемент изображения ( <img> ).
    3. Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя window.URL.createObjectURL() (en-US) для создания URL на двоичный объект.
    4. Устанавливаем высоту изображения в 60 пикселей.
    5. Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода window.URL.revokeObjectURL() (en-US) , передавая в него строку URL объекта, которая указана в img.src .
    6. Добавляем новый элемент в список.

    Пример: Загрузка файла, выбранного пользователем

    Ещё одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.

    Создание заданий на загрузку

    Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj , с соответствующим File , прикреплённым в атрибут file . Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя Document.querySelectorAll() , как показано здесь:

    Строка 2 получает NodeList в переменную imgs со всеми элементами документа, имеющих класс CSS obj . В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload . Каждый из них отвечает за загрузку соответствующего файла.

    Управление процессом загрузки файла

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

    Перед началом загрузки данных выполняются несколько шагов для подготовки:

    Асинхронная обработка процесса загрузки

    Пример: Использование URL объектов для отображения PDF

    URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.

    В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false .

    А здесь изменение атрибута src :

    Пример: Использование URL объектов с другими типами файлов

    Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:

    В этой заметке вы узнаете, как реализовать AJAX загрузку файлов на сервер с использованием jQuery. Это не так уж сложно!

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

    Domenator - Купить Домен для сайта

    Замечу заранее, что эта статья вряд ли поможет, если вы совсем плохо разбираетесь в jQuery и PHP, базовые знания обязательны. И, пожалуй, обязательно иметь хоть какой-то опыт в загрузке файлов (картинок) на сервер с обычной HTML формы, по крайней мере нужно представлять как это работает.

    Ну, меньше слов, приступим!

    Для начала предположим, что у нас есть такой HTML код: поле и кнопка загрузки:

    1. Получение данных файла из поля file

    Первое что нам нужно сделать — это получить данные input поля при добавлении в него файла(ов). Для этого прикрепим к событию change свою функцию, которая установит данные файла:

    Этот код сохранит данные поля type="file" в переменную files , с которой мы будем работать дальше.

    2. Загружаем файлы по клику

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

    Создадим функцию, повесим ее на событие click и отправим AJAX запрос с данными файлов. Этот запрос отличается от обычного AJAX запроса, и тут не подходит обычная отправка POST данных:

    Что делает функция? Создает новый объект new formData() , добавляет в него данные файлов из массива files . Затем этот объект данных формы передается в AJAX запрос. 2 параметра нужно установить в false обязательно:

    • processData — потому что jQuery будет конвертировать массив files в строку, и сервер не сможет получить данные.
    • contentType — потому что дефолтные установки jQuery равны application/x-www-form-urlencoded , что не предусматривает отправку файлов. А еще, если установить этот параметр в multipart/form-data , похоже это ничего не даст.

    3. Загрузка файлов на сервер

    Чтобы наглядно показать, как обрабатывать отправленный во втором пункте запрос, приведу простой php-скрипт, без всяких проверок.

    Создадим файл submit.php и добавим в него этот код (предполагается что submit.php лежит в той же папке, где и файл, с которого отправляется AJAX запрос):

    Не используйте этот код напрямую! Пишите свой!

    Заключение

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

    Чтобы не собирать весь вышеописанный код вручную, скачайте вот этот архив: ajax-file-upload.zip . Загрузите его содержимое на ваш php сервер, зайдите в паку из архива, и попробуйте загрузить файл. Вы увидите, как все это работает, сможете "пошаманить" над кодом и разобраться подробнее в реальных условиях.

    Также, рекомендую к прочтению статью о базовых знаниях для создания AJAX запросов в WordPress:

    Знания из этой статьи вам очень пригодятся при создании AJAX загрузки файлов под WordPress.

    Недавно столкнулся с интересной задачей: на странице нужно разместить пользовательскую форму, в которой было несколько полей для ввода данных и поле для выбора файла. Причем, кнопка выбора файла сделана именно как красивая кнопка, а не стандартный компонент input[file]. А отправка этой формы, в соответствии с техническим заданием, должна выполняться сразу после выбора файла. В итоге должна получится подобная пользовательская форма:

    Здесь можно выделить две отдельные задачи. Первая – выполнить отправку формы сразу после выбора файла. Вторая – оформить компонент выбора файла в соответствии с дизайном в виде нестандартной кнопки.

    Форма, для которой реализуем все описанные задачи, имеет следующий исходный код:

    и в начале выглядит так:

    Submit формы после выбора файла в input[file]

    Подобная задача рассматривалась в статье о перезагрузке и обновлении страницы выбором в select . Там так же использовалось событие компонента формы для отправки формы с помощью скрипта.

    Выполнить отправку формы можно с помощью jQuery кода:

    Этот вызов нужно привязать к событию change (обновлению) компонента выбора файла input[type=file]. В итоге код jQuery для решения нашей формы должен быть следующий:

    Собственное оформление input[file] средствами CSS

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

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

    Одним из вариантов может быть снова применение jQuery. Но, на мой взгляд, если есть возможность обойтись без дополнительных скриптов, а использовать только теги HTML, то стоит делать без скриптов. И здесь нам на помощь приходит тег HTML label. В статье "Переключение radio кнопки и checkbox нажатием на подпись в HTML" уже описывалось его применение.

    Здесь, подобным образом, тег компонента выбора файла обрамляется тегом label. В label так же добавим текст "Загрузить файл"

    Теперь остается только назначить стили для оформления имеющихся тегов. Компонент выбора файлов скрывается. Тегу label, придаем нужный внешний вид:

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

    Привет, друзья. Давно просят сделать статью о том, как стилизовать input с type file, то есть поле для прикрепления файла. Однажды, косвенно я затрагивал эту тему в одной из статей, но сегодня мы остановимся на ней подробнее.

    Конечно, как обычно есть несколько путей решить эту задачу. Это:

    • Использовать фреймворк, такой как Bootstrap, Foundation и подобные.
    • Попробовать самостоятельно стилизовать при помощи JS и CSS.
    • Воспользоваться плагином для стилизации поля с типом «file».

    Стилизация поля input с типом file

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

    Остается попробовать самостоятельно привести все в порядок или воспользоваться плагином. Давайте остановимся на этих 2 вариантах подробнее, чтобы у вас больше не возникало вопросов как всё-таки стилизовать тег input с атрибутом type=file. Я подробно опишу вариант самостоятельной стилизации, а в конце дам ссылку на плагин, который делает практически тоже самое.

    Самостоятельная стилизация тега input с типом «файл»

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

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

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

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

    Вот так сейчас выглядит поле в браузере:

    Добавим стили, чтобы получить описываемый результат. То есть скроем input, оставим только label, поместим в него иконку и сделаем его похожим на обычную кнопку, но сначала, добавим кое-что в верстку:

    Теперь добавим стили:

    Вот что получилось:

    Как видите, уже лучше, но пока мы не видим никакой реакции на то, что файл выбран. Нет никакого уведомления и никакой индикации. Давайте исправим это. Под формой, ближе к закрывающему тегу body добавьте следующий скрипт:

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

    Как видите, все не очень сложно, плюс, без jQuery, так что если у вас она уже не используется, то можно не тянуть ее за собой, ради такого скромного функционала.

    Стилизация «input type file» при помощи плагина

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

    Для настройки сначала подключаем сам плагин и jQuery:

    Затем создаем input:

    И инициализируете плагин:

    После инициализации сам инпут скроется, а на его месте появится кнопка.

    Чтобы задать ей свой класс и поместить в нее свой текст, нужно передать в fileinput html. Например так:

    Для наглядности, смотрите пример на jsfiddle, а на сегодня все. Надеюсь, что у вас больше не осталось вопросов по поводу того, как стилизовать input с type fifle.

    Похожие публикации

    10 комментариев

    Годнота, спасибо, я просто делал всегда рамку вокруг инпута и центрировал его. Вообще есть много споров по поводу того, стоит ли индивидуализировать этот и другие элементы, или оставить так, как многие уже привыкли, то есть по умолчанию и одинаково +- во всех браузерах.

    Что делает multifile-upload-field-for-contact-form-7? Если просто добавляет enctype='multipart/form-data', то попробуйте добавить этот параметр скриптом обычным, а не плагином.

    Отличная стилизация Input. Давно искал такой вариант дизайна. Но при попытке передать файл на сервер, у меня появилась ошибка «Не удалось открыть поток: отказано в доступе». Что я сделал?
    Я загуглил эту тему и вот что нашел. Может кому то пригодиться.
    1. Узнайте код ошибки php. Поместите этот код в начало файла php.

    2. К папке должен быть доступ 777. Проверь это.
    3. Тег form должен иметь атрибут enctype = "multipart/form-data" method = "post".

    4. Полностью открой и посмотри массив $ _FILES на сервере.

    5. Открой и посмотри массив $ _FILES на клиенте.

    6. Проверь права пользователя и группы пользователей на каталог.

    Aleksey, спасибо, что не оставили без внимания и дали такой развернутый ответ. Кому-то обязательно пригодится!

    Доброго времени суток. Оформил по данному примеру кнопку отправки.
    Прошу прощения за, может быть, тупой вопрос, но.
    Как получить вложенные файлы на почту? Если с остальными полями понятно
    [tel* tel-136] выведет телефон который введет пользователь и т.д.
    Но что в данном случае вставить в поле "Прикрепленные файлы", чтобы файл пришел на почту?
    Еще раз прошу прощения, за может быть примитивный вопрос.

    Я впервые сталкиваюсь вообще с отправкой файлов с формы. Все сделал по инструкции с поста, но так и не понял в какой папке хранятся файлы отправленные с формы cf7. На самом деле, проблема была только в стилизации кнопки отправки файлов, но более разумного решение, чем тут, не нашел. И стилизовал так как нужно, но столкнулся с рядом вопросов, с которыми ранее не сталкивался. В какую папку сохраняются файлы? Где их можно найти? Тыкните носом, пожалуйста.

    1.Узнаем имя файла.
    2.Берем сам файл.
    3.Путь (папка) на сервере куда будет скопирован файл.
    4.Перемещаем файл с браузера на сервер.

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