Пошаговая инструкция по реализации загрузки файлов на сервер без перезагрузки страницы на PHP + Javascript
Недавно я столкнулся с вполне, на мой взгляд, распространённой задачей: нужно обеспечить пользователю возможность загрузить на сервер любое число, скажем, картинок с комментарием к каждой из них в рамках одного интерфейса. В моём случае это было: фото товара, его описание и количество. Для наглядности прикладываю скриншот интерфейса:
Идея и алгоритм решения
Так как описания и фотографии для получения конечного результата можно изменять очень много раз, решено было осуществить следующую схему работы: фотографии загружаются на сервер на одной при клике на фото-иконку, при этом в случае успеха сервер возвращает имя картинки, а при неуспехе — «error». Соответственно, в случае успеха, фото-иконка заменяется на миниатюру загруженного фото, а в скрытое поле формы соответствующей строки сохраняется её имя, а при неуспехе мы получаем фото-иконку и пустое скрытое поле формы соответствующей строки, отвечающее за имя фото. Текстовая же информация при изменении любого поля формы отправляется на сервер вся в формате массив [имяФото, описаниеДетали, количествоШт] — это наиболее универсально: один и тот же метод отвечает за полное обновление списка товаров при их редактировании или удалении. Как известно, AJAX не умеет отправлять файлы, поэтому реализуем процедуру загрузки с помощью обычной формы, в качестве target которой укажем скрытый фрейм, который и будет перезагружаться вместо страницы.
Практическая реализация
Итак, в нашем распоряжении HTML, PHP и Javascript. Поехали:
1. Верстаем на странице форму для загрузки фото. Она содержит только один input, который мы спрячем с помощью css:
2. Создадим на странице скрытый iframe, который и будет перезагружаться в результате отправки формы с файлом:
3. Верстаем таблицу товаров, с которой и будет работать пользователь:
- — иконка, клик которой будет имитировать клик /> в форме загрузки фото,
- — это наш скрытый input, отвечающий за имя фото,
- — описание,
- — количество штук.
3. Пишем PHP-код загрузки файла:
Мой проект на CodeIgniter, поэтому код вот такой, но в целом, суть в следующем: мы просто загружаем и переименовываем полученный из формы файл, если всё проходит успешно, выводим в наш iframe его имя, если нет — «error».
4. Пишем Javascript, который будет контролировать весь процесс:
- — просто расставляет порядковые номера в таблице,
- — отправляет на сервер все текстовые поля нашей таблицы товаров. Их обработку в рамках этой статьи упоминать смысла нет,
- — указываем переменные, которые будут содержать ссылку на текущее фото и таймер. Подробнее об этом чуть позже;
- — одна из основных функций: отвечает за обработку результата загрузки фото на основе содержимого нашего скрытого iframe. Эта функцию запускается с интервалом при отправке формы фото и заканчивает своё выполнение подстановкой миниатюры фото вместо фото иконки или выдачей сообщения об ошибке при обнаружении изменения содержимого iframe, то есть по окончании обработки фото сервером;
- — просто расставляет порядковые номера в таблице при загрузке страницы — я не включил в статью то, что эта страница используется как при первом добавлении товаров в список, так и при редактировании этого списка, то есть таблица товаров может быть изначально не пустой;
- — эмулируем клик input file в форме загрузки изображения при клике фото-иконки (так как пользователь может передумать использовать ранее загруженное фото, очищаем его перед выбором следующего);
- — отправляем форму загрузки фото на сервер при изменении поля фото;
- — вызываем с интервалом вышеописанную функцию обработки результата загрузки фото на сервер;
- — при изменении любого поля (в том числе и имени фото) в списке товаров отправляем его весь на сервер;
- — добавляет строку в таблицу товаров;
- — удаляет строку из таблицы товаров.
Вот, собственно, и весь процесс.
Если возникнет такая необходимость, сделаю демо процесса отдельным блоком и прикреплю сюда ссылку, а так же дам исходники.
Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
HTML-форма отправит файл только методом POST и с атрибутом enctype="multipart/form-data" .
Форма для загрузки сразу нескольких файлов
Файл upload.php
- Поддерживает как одиночную загрузку файла так и множественную (multiple) без изменения кода.
- Проверка на все возможные ошибки которые могут возникнуть при загрузке файлов.
- Имена файлов переводятся в транслит и удаляются символы которые будут в дальнейшем мешать вывести их на сайте.
- Есть возможность указать разрешенные и запрещенные для загрузки расширения файлов.
Возможные проблемы
- На unix хостингах php функция move_uploaded_file() не будут перемещать файлы в директорию если у нее права меньше 777.
- Загрузка файлов может быть отключена в настройках PHP директивой file_uploads .
- Не загружаются файлы большого размера, причина в ограничениях хостинга.
Посмотрите в phpinfo() значения директив:- upload_max_filesize – максимальный размер закачиваемого файла.
- max_file_uploads – максимальное количество одновременно закачиваемых файлов.
- post_max_size – максимально допустимый размер данных, отправляемых методом POST, его значение должно быть больше upload_max_filesize .
- memory_limit – значение должно быть больше чем post_max_size .
Не забудьте в директории куда помещаются загруженные файлы запретить выполнение PHP.
Пример использования для начинающих
Если вы уже пользовались каким-либо FTP-клиентом, возможно, вам следует сразу перейти к более продвинутому руководству пользователя.
Будем предполагать, что вы уже установили и запустили клиент FileZilla (руководство по установке).
Соединение с сервером
Мы будем пользоваться такими данными для логина. Замените их на свой вариант, чтобы следить за работающим примером из этого руководства.
В этом случае мы заполняем панель быстрого подключения:
Поле Порт: можно оставить незаполненным, если вы не используете специфический порт для подключения.
Примечание: если вы желаете точно указать порт, к примеру, SFTP или FTPS, введите имя хоста таким образом: sftp://hostname или ftps://hostname соответственно.
Теперь FileZilla может быть подключен к серверу. Если подключение произошло без ошибок, правая «колонка» клиента будет показывать список файлов и директорий вместо уведомления «Не подключен к серверу».
Навигация и расположение окон
Легенда: 1. панель инструментов, 2. панель быстрого подключения, 3. лог сообщений, 4. локальная панель, 5. удалённая (серверная) панель, 6. очередь передаваемых файлов (полноразмерная версия изображения)
На этом этапе мы ознакомимся с расположением окон в FileZilla.
Под панелью инструментов (1) и панелью быстрого подключения (2) в логе сообщений (3) отображаются сообщения связанные с передачей файлов и подключением. Ниже вы увидите список файлов. В левой колонке (локальная панель, 4) отображаются локальные файлы и директории, т.е. содержимое компьютера, на котором запущен клиент FileZilla. В правой колонке (серверная панель, 5) отображаются файлы и директории сервера, к которому вы подключены. В обеих колонках сверху отображается дерево директорий, а внизу — содержимое текущей директории. Навигация осуществляется простым выбором пунктов дерева или списка, как и в любом другом файловом менеджере. В нижней части окна помещена очередь файлов (6) со списком файлов которые уже были загружены или будут загружены.
Передача файлов
Теперь мы загрузим следующие файлы (или те, которые вы выбрали):
Закачивание файлов
Для начала в локальной панели перейдите в директорию, которая содержит нужные данные (например, index.html и images/). Теперь, перейдите в нужную целевую директорию на сервере (используя список в серверной панели). Чтобы загрузить данные, выберите соответствующие файлы/директории и перетяните их из локальной в удалённую панель. После этого вы заметите, что файлы будут добавлены в очередь в нижней части окна и, через некоторое время, удалены оттуда после загрузки на сервер (естественно, если всё произошло без ошибок). Загруженные файлы и директории будут отображены в серверном списке в правой колонке.
Список локальных и серверных файлов после загрузки
Примечание: Если вам не нравится «перетягивать» файлы, достаточно просто кликнуть правой кнопкой на выбранных файлах/директориях и нажать «Загрузить»
Примечание (для продвинутых): Если вы включили фильтрование и загрузили директорию целиком, на сервер будут загружены только неотфильтрованные файлы из этой директории.
Скачивание файлов
Скачивание файлов или целых директорий, по сути, работает так же, как и закачивание, вы просто перетягиваете файлы/директории наоборот: из удалённой панели на локальную.
Примечание: Если вы (случайно) попытаетесь перезаписать файл при его скачивании или закачивании, FileZilla по умолчанию отобразит диалоговое окно с разными вариантами действий (перезаписать, переименовать, пропустить, . ).
Использование менеджера сайтов
После того, как вы убедились в том, что можете передавать файлы (в противном случае попрактикуйтесь в этом), у вас может возникнуть желание добавить информацию о сервере в менеджер сайтов для облегчения последующих подключений. Выберите пункт Копировать соединение в Менеджер сайтов в меню Файл, после чего будет открыт менеджер сайтов, а в нём будет создан новый пункт заполненный соответствующей информацией. Заметьте, что название пункта выбрано и подсвечено — это значит, что вы можете ввести соответствующее имя для облегчения поиска этого пункта в дальнейшем (к примеру, введите domain.com FTP-сервер — вы сможете переименовать его в дальнейшем). Теперь закройте диалоговое окно, кликнув на OK.
В следующий раз для подключения к серверу достаточно просто выбрать его в менеджере сайтов и нажать Подключиться.
Выводы
Мы предполагаем, что теперь вы способны использовать основные возможности FileZilla.
Последнее замечание: большинство задач могут быть решены разными способами. В этом руководстве описаны самые очевидные решения — потратив некоторое время на работу с программой и прочтение остальной документации, вы наверняка найдёте самые быстрые решения для ваших задач (к примеру, на панели инструментов расположены кнопки для часто используемых команд; некоторые из них реагируют на клик правой кнопкой).
Если вы достаточно уверены в своих силах, возможно, вам стоит приступить к более продвинутому руководству пользователя для изучения остальных возможностей, не раскрытых в вышеизложенном примере.
Загрузка файлов на сервер на php+html
В этой статье я хочу показать как можно быстро и просто реализовать загрузку файлов на сервер с помощью php с проверками файла на размер и на формат. Эта тема хоть и простая и очень распространенная, все же по ней тоже часто возникают вопросы у программистов новичков. Чтобы передать какие-либо данные из браузера на сервер необходимо на странице создать html-форму:
В которой будет указан путь к скрипту на сервере, куда будут отправлены данные, в данном случае это /form/index.php. Также указывается метод передачи данных — POST или GET. И необходимо указать тип передаваемых данных, чтобы передавать файлы, тип должен быть multipart/form-data.
Когда сама форма готова, внутри нее следует создать input и типом file, в него пользователь сможет загрузить файл, для последующей отправки на сервер.
Далее начинается самое интересное — получение и обработка данных на сервере. Все данные о файле будет храниться в суперглобальной переменной $_FILE. Поэтому первым делом на сервере необходимо проверить — существует эта переменная или нет. В случае существования, мы можем проверить размер файла, получить его имя, расширение и путь к нему, файл будет хранится во временных файлах.Загрузка файлов в php. Код
Сперва сверстаем небольшую форму и добавим условия, при которых будет отображаться сообщения об успешной отправке файла или об случившихся ошибках:
Теперь напишем серверный скрипт, который будет проверять размер и формат файла, а так же в случае корректных данных будет сохранять файл на сервере.
На этом все, исходники формы для загрузки файлов на php, вы можете скачать — тут.