[Из песочницы] Полностью своя кнопка «Выбрать файл»
Изучая веб-программирование, я не нашел внятного решения проблемы оформления загрузки файла на сервер при помощи одной кастомной кнопки.Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input[type=file] для адаптивного сайта… И да — все работает в IE, начиная с 9 версии.
Цель: создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).Инструменты: CSS, PHP, JavaScript.Используемые технологии: Ajax, через скрытый iframe.
ПреамбулаИз кода для упрощения сознательно выкинуты все процедуры проверки принятого файла и try-catch вызовов функций, так как эти моменты не являются темой данной статьи. Также не охватывается момент по предотвращению звукового сигнала в IE. В работе используем технологию Ajax, подразумевающую, что у нас есть основная страница, осуществляющая взаимодействие с пользователем (front-end) и скрипт на сервере, обрабатывающая наши запросы (back-end)Технология работы 1. На главной странице создаем «form action» Делаем ей target на скрытый фрейм, который создаем статически (или динамически). Создаем два «input» с типом «file» и «submit», даем им «id», помещаем их в «div», который спрячем со страницы стилем. Все эти элементы не видимы для пользователя и не воспринимают каких-либо его действий.2. Начинаем «магию». Для «input» с типом «file» на событие по изменению вешаем вызов функции onchange=«LoadFile ();».3. На главной странице создаем кнопку. Навешиваем ей на событие нажатия кнопки мыши вызов функции onclick=«FindFile ();».4. В функции FindFile () имитируем клик на «input» с типом «file». То есть при нажатии на нашу кнопку вызывается стандартный диалог выбора файла. Как только пользователь выбрал файл, срабатывает событие onchange и вызывается функция LoadFile (). В функции LoadFile () имитируем клик на «input» с типом «submit».5. Форма формирует POST запрос с именем файла к нашему back-end скрипту, который осуществляет все проверки по безопасности и загрузку файла. После этого скрипт вызывает callback функцию главной страницы, которой сообщает о результате выполнения.Собственно все. Для примера приведены четыре основных файла, код которых приведён ниже:
css/style.css — стили главной страницыview/upload.php — back-end скрипт загрузки файлаindex.php — главная страницыjs/upload.js — front-end скрипты главной страницы
Кроме того, необходим любой файл с картинкой для кнопки buttons/openfile.png
Загружаемые файлы помещаем в директорию …/temp/
Таблица стилей (css/style.css) Создаем стиль кнопки и скрытого «input». .navButtons{ border:1 px gray solid; position: absolute; overflow: hidden; display: block; height:50 px; width:50 px; margin:10 px; -moz-box-shadow:5 px 5 px 7 px rgba (3,33,33,.7); -webkit-box-shadow: 5 px 5 px 7 px rgba (3,33,33,.7); box-shadow: 5 px 5 px 7 px rgba (3,33,33,.7); -moz-border-radius:4 px; -webkit-border-radius:4 px; border-radius:4 px; }
.navButtons: hover { border:2 px solid black; background-color:#fff; }
.hiddenInput{ position: absolute; overflow: hidden; display: block; height:0 px; width:0 px; } Input мы просто делаем нулевой ширины и высоты Скрипт обрабатывающий запрос на загрузку файла (view/upload.php) Здесь все согласно примерам в интернете, валидация файлов изъята: window.parent.onResponse (»'.$obj.'»); '; } // определяем куда скопируем файл пользователя $dir = '…/temp/'; $name = basename ($_FILES['loadfile']['name']); $file = $dir. $name; //копируем файл и получаем результат $success = move_uploaded_file ($_FILES['loadfile']['tmp_name'], $file); //вызываем callback функцию и передаем ей результат jsOnResponse (»{'filename':'» . $name.»', 'success':'» . $success.»'}»); ?> Главная страница (index.php)
JavaScript в главной форме (js/upload.js) function FindFile () { document.getElementById ('my_hidden_file').click (); } function LoadFile () { document.getElementById ('my_hidden_load').click (); }
function onResponse (d) // Функция обработки ответа от сервера { eval ('var obj = ' + d + ';'); if (obj.success!=1) { alert ('Ошибка!\nФайл ' + obj.filename + » не загружен — »+obj.myres); return; }; alert ('Файл загружен'); }
