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

Много месяцев тому назад, пытаясь разобраться с шумихой, поднятой вокруг AJAX, я бродил по сайту FiftyFourEleven, разглядывая изумительные примеры новаторского подхода к программированию на javascript, когда совершенно случайно наткнулся на пример кода под названием «Загружайте Несколько Файлов с Помощью Одного Элемента Ввода».

Поэтому когда я решил начать выпуск библиотеки 15 Days of jQuery, он стал одним из первых скриптов, который я хотел переработать с помощью jQuery.

Для Фанатов Общедоступности

Несколько дней назад, просматривая свои файлы server.log с данными о работе сервера, я заметил, что получил trackback-уведомление с неизвестного мне сайта. Я посетил данный сайт и обнаружил, что два моих руководства на jQuery упоминаются в одной статье в качестве примера того, что автор на дух не переносит в языке javascript.

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

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

Два Урока по Цене Одного

Задача №1: Осуществить загрузку нескольких файлов с использованием одного элемента ввода файла… и сделать весь процесс взаимодействия привлекательным.

Задача №2: Сделать загрузку нескольких файлов привлекательной… без ущерба удобства и простоты использования. Поставить в центр внимания ненавязчивый javascript для создания формы поля ввода нескольких файлов.

Примеры

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

Загрузка нескольких файлов с помощью одного поля ввода.

Пример второй – код формы с несколькими полями ввода в файле .(x)html, но jQuery меняет отображение того, что пользователь видит на экране и дает результат, подобный представленному в первом примере. Преимущество этого метода состоит в его ненавязчивости… даже если javascript отключен в настройках браузера посетителя, это все равно не помешает ему загружать файлы.

Загрузка файлов с помощью нескольких полей ввода

Объяснение

Одно поле ввода –

Функция jQuery $(document).ready() делает две вещи:

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

$("input[@type=file]").change(function(){
doIt(this, fileMax);
});

Функция doIt() (ничего имя, да?) проверяет, достигнуто ли максимальное граничное значение файлов, и если нет, то прячет поле ввода файла, добавляет новое в элемент div, вставляет название выбранного файла в div с идентификатором id «files_list» и в конце добавляет кнопку Delete (удалить).

Для перемещения по дереву структуры DOM (объектная модель документов) я использую функцию parent() библиотеки jQuery, а затем удаляю элементы с помощью функции remove(). Я также применяю функции append() и prepend() для добавления названий файлов и новых полей ввода соответственно.

Два ключевых момента:

1- Вы устанавливаете максимально допустимое в этой строке количество файлов

var fileMax = 3;

2- Поля ввода файлов должны быть названы соответственно

<input type="file" class="upload" name="fileX[]"  />

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

Ввод нескольких файлов -

Справиться с этой задачей оказалось делом более хитрым.

Во-первых, количество допустимых к загрузке файлов определяется числом полей ввода в вашем документе .(x)html. Во-вторых, вам необходимо называть их так, чтобы информация о поле накапливалась в массиве.

<input type="file" class="upload" name="fileX[]"  />

Огромное отличие этой второй версии состоит в том, что я прохожу по каждому полю ввода файла и применяю функцию doIt(), когда меняется значение поля. Делая проход, я могу отсылать дополнительную, чрезвычайно важную для моего кода информацию: порядок полей в стеке.

Другими словами, во время исполнения кода он нацеливается на первое поле ввода, второе, либо же третье.

Вышеописанный код вы можете найти здесь:

$("input[@type=file]:nth-of-type("+n+")")

Гибкость библиотеки jQuery предоставляет мне возможность использовать таблицы стилей CSS и язык XPath для доступа и работы с отдельными элементами.

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

Популярность: 90%