Загрузка файла на сервер с помощью JavaScript и библиотеки JQuery. Отправка файлов на сервер Простая загрузка файла на сервер php

Наверное многие сталкивались с вопросом "Как загрузить файл на сервер с помощью JS и JQuery?".
И вероятно не у всех получилось это сделать. На самом деле все не так сложно как кажется.
В данном уроке я опишу процесс загрузки файла на сервер(хостинг) .
Для обмена данными между браузером и веб-сервером, используется технология ajax.
Версия JQuery используемая в рецепте: 2.2.2.

Создаем примитивную разметку из тегов html, head и body.
В теге head необходимо прописать путь до библиотеки jquery.
В примере я использую jquery с сервера google.

В теге body создаем форму, которая состоит из тега input и button.
С помощью input type="file" осуществляется выбор файла для загрузки.
Тег button необходим для запуска js кода на передачу файла.

Форме задаем name="uploader", enctype="multipart/form-data", method="POST".
Имя формы: name="uploader"
Способ кодирования данных формы: enctype="multipart/form-data"
Метод передачи данных: method="POST"

Отправить этот файл: Загрузить

Весь код html и js разметки:
Отправить этот файл: Загрузить

Переходим к java script коду.
Для передачи файла необходимо передавать форму целиком:
$("form").submit(function(e) {

Считываем данные формы в переменную:
var formData = new FormData($(this));

Далее для передачи данных на веб-сервер используем технологию ajax.
В случае успешной передачи файла во всплывающем окне будет отображено соответствующее сообщение.
В случае возникновения ошибки или отсутствии файла будет отображено сообщение с текстом возникшей проблемы.
$.ajax({ url: "file.php", type: "POST", data: formData, async: false, success: function (msg) { alert(msg); }, error: function(msg) { alert("Ошибка!"); }, cache: false, contentType: false, processData: false });

Весь код на java script с использование jquery:

Теперь остался код на стороне сервера для приема данных с формы методом POST запроса.

Получаем корневую директорию сайта и назначаем папку для загрузки файлов:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."uploads".DIRECTORY_SEPARATOR;

Считываем загружаемый файл:
$uploadfile = $uploaddir . basename($_FILES["userfile"]["name"]);

Проверяем загружен ли файл.
В соответствии с входящими данными назначаем сопровождающее сообщение.
Если файл не загружен, загружаем в директорию указанную в $uploadfile:
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) { $out = "Файл корректен и был успешно загружен.\n"; } else { $out = "Возможная атака с помощью файловой загрузки!\n"; }

При выполнении указанных действий возвращается ответ.

Весь код на php:

Весь html код включая js:

Отправить этот файл: Загрузить $("form").submit(function(e) { var formData = new FormData($(this)); $.ajax({ url: "file.php", type: "POST", data: formData, async: false, success: function (msg) { alert(msg); }, error: function(msg) { alert("Ошибка!"); }, cache: false, contentType: false, processData: false }); e.preventDefault(); });

Скачать файл с исходным кодом:

Как загрузить файл на сервер используя PHP? В этой статье мы подробно рассмотрим этот вопрос с примерами.

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

Вот пример HTML-кода такой формы:

Что уникального в этой форме:

После того, как сервер получил HTTP-запрос от такой формы, он записывает файл во временную папку на сервере.

Если хотите чтобы файл на этом этапе сохранялся в другой каталог, укажите его в директиве upload_tmp_dir файла php.ini.

Для перемещения загруженного файла в новое место используется функция move_uploaded_file .

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

Итак, после того, как скрипт получил данные формы с переданным файлом, файл он записал в специальную папку, а данные о файле записал в двумерный массив $_FILES .

Давайте рассмотрим пример, который выводит содержимое массива $_FILES на экран.

Вот что мы получим в результате работы этого скрипта:

Рис.1. Массив $_FILES.

Теперь давайте разберём, что содержится в этом массиве.

В нашем двумерном массиве $_FILES есть один элемент filename . Это значение поля name из элемента формы:

Данные для этого файла:

• $_FILES["filename"]["name"] - имя файла;
• $_FILES["filename"]["type"] - тип файла;
• $_FILES["filename"]["tmp_name"] - полный путь к временному каталогу на диске;
• $_FILES["filename"]["error"] - содержит код ошибки, который это 0, если операция прошла успешно;
• $_FILES["filename"]["size"] - размер файла.

Можно было бы в форме указать два поля для файлов, например так:

В этом случае наш массив выглядел бы так:

Итак, теперь мы знаем как устроен массив $_FILES и следующий шаг - положить полученный файл в нужное нам место.

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

Синтаксис функции move_uploaded_file:

move_uploaded_file (откуда переносить, куда переносить)

Функция move_uploaded_file возвращает булево значение:

• TRUE - в случае успеха,
• FALSE - если первый аргумент является загруженным файлом, но по каким-либо причинам не может быть перемещён в указанное место, в этом случае никаких действий не предпринимается.

Используем эту функцию в примере:

Этот скрипт перемещает картинку в ту же папку, в которой он сам находится. Для этого мы используем встроенные в PHP константы для указания пути:

• __DIR__ - одна из "волшебных" констант, содержит директорию файла.
• DIRECTORY_SEPARATOR - предопределённая константа, содержащая разделитель пути. Для ОС Windows это «\», для ОС Linux и остальных - «/».

Внимание: Если результирующий файл уже существует, он будет перезаписан.

Ест ещё одна функция, которую нужно обязательно использовать при работе с загрузкой файлов на сервер. Это функция is_uploaded_file и она используется из соображений безопасности.

is_uploaded_file - определяет, был ли файл загружен при помощи HTTP POST и возвращает TRUE, если это так.

Использование этой функции целесообразно для удостоверения, что злонамеренный пользователь не пытается обмануть скрипт так, чтобы он работал с файлами, с которыми работать не должен - к примеру, /etc/passwd .

Обратите внимание: для правильной работы функции is_uploaded_file нужно передать путь к файлу на временном хранилище на сервере, то есть аргумент вида $_FILES["filename"]["tmp_name"] , - а вот имя закачиваемого файла на клиентской машине ($_FILES["filename"]["name"]) тут не подходит.

Наш конечный пример скрипта, обрабатывающего форму отправки файла, будет выглядеть так:

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

Максимальный размер загружаемого файла можно также задать при помощи директивы upload_max_filesize в файле в php.ini. Значение этой которой директивы по умолчанию равно 2 Мбайт:

Итак, мы узнали про директиву upload_max_filesize файла php.ini которая устанавливает максимальный размер загружаемого файла. Какие ещё директивы файла php.ini отвечают за загрузку файлов на сервер?

Кстати, если Вы хотите узнать, где расположен Ваш файл php.ini, выполните скриптик:

Итак, список директив файла php.ini:

• file_uploads - возможность запретить или разрешить загрузку файлов на сервер в целом, по умолчанию разрешена (значение On).
• post_max_size - общее ограничение сверху на размер данных, передаваемых в POST запросе. Если Вам необходимо передавать несколько файлов одновременно, или работать с большими файлами, измените значение этой директивы. Значение по умолчанию 8Мб.
• upload_max_filesize - уже рассмотренная нами директива. Не забывайте при необходимости также менять post_max_size .
• upload_tmp_dir - временная директория на сервере, в которую будут помещаться все загружаемые файлы.

Это всё, что я хотел сказать Вам по теме "Загрузка файлов на сервер в PHP".

Последнее обновление: 1.11.2015

Чтобы загрузить файл на сервер, нам надо использовать форму с параметром enctype="multipart/form-data" и массив $_FILES . Итак, создадим файл upload.php со следующим содержимым:

Загрузка файла Выберите файл:

Здесь определена форм с атрибутом enctype="multipart/form-data" . Форма содержит специальное поле для выбора файла.

Все загружаемые файлы попадают в ассоциативный массив $_FILES . Чтобы определить, а есть ли вообще загруженные файлы, можно использовать конструкцию if: if ($_FILES)

Массив $_FILES является двухмерным. Мы можем загрузить набор файлов, и каждый загруженный файл можно получить по ключу, который совпадает со значением атрибута name .

Так как элемент для загрузки файла на форме имеет name="filename" , то данный файл мы можем получить с помощью выражения $_FILES["filename"] .

У каждого объекта файла есть свои параметры, которые мы можем получить:

$_FILES["file"]["name"] : имя файла

$_FILES["file"]["type"] : тип содержимого файла, например, image/jpeg

$_FILES["file"]["size"] : размер файла в байтах

$_FILES["file"]["tmp_name"] : имя временного файла, сохраненного на сервере

$_FILES["file"]["error"] : код ошибки при загрузке

Также мы можем проверить наличие ошибок при загрузке. Если у нас нет ошибки, то поле $_FILES["filename"]["error"] содержит значение UPLOAD_ERR_OK .

При отправке файла на сервер он сначала загружается во временное место, из которого затем с помощью функции move_uploaded_file() он перемещается в каталог сервера.

Функция move_uploaded_file() принимает два параметра путь к загруженному временному файлу и путь, куда надо поместить загруженный файл.

По умолчанию размер загружаемых файлов ограничен 2 мб. Однако можно настроить данный показатель в файле конфигурации. Изменим этот показатель, например, до 10 мб. Для этого найдем в файле php.ini следующую строку:

Upload_max_filesize = 2M

Изменим ее на

Upload_max_filesize = 10M

Также мы можем настроить папку для временных загружаемых файлов. Для этого в файле php.ini найдем следующую строку:

;upload_tmp_dir =

Изменим ее на

Upload_tmp_dir = "C:/php/upload"

Также в каталоге php нам надо создать папку upload .

Изменим скрипт upload.php так, чтобы он поддерживал множественную загрузку:

Загрузка файла

Каждое поле выбора файла имеет атрибут name="uploads" , поэтому сервер будет рассматривать набор отправленных файлов как единый массив.

Затем используя цикл foreach , проходим по все файлам и сохраняем их в каталог веб-сайта.

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Что такое Upload files, или почему не работает
copy ("c:\images\sample.jpg", "http://mysite.ru/uploads/sample.jpg ")

Даже если у Вас в распоряжении всего один компьютер, на котором совмещен и сервер и рабочая станция, не стоит забывать о том, что php использует технологию клиент/сервер. Файл, который мы хотим загрузить, как правило, находится на машине клиента, т.е. пользователя, обыкновенного посетителя сайта. Место назначения - сервер. Для того чтобы совершить процесс передачи файла, нам понадобиться следующая форма:

Send this file:

При этом в поле action должен быть указан URL Вашего php-скрипта, который в дальнейшем будет заниматься обработкой загружаемых файлов. Скрытое поле MAX_FILE_SIZE должно предшествовать полю выбора файла, и содержать максимально допустимый размер файла в байтах. Его назначение - проверка размера файла еще до момента отправки файла на сервер. Это должно избавить пользователя от длительной и безрезультатной загрузки файла на сервер и образования лишнего трафика, но не стоит особо полагаться на это ограничение, так как его легко обойти.

Что происходит, когда пользователь выбрал файл на своем диске, и нажал на кнопку "Send file"? Браузер отсылает файл на сервер, где php-интерпретатор помещает его в свою временную директорию, присваивая ему случайное имя и выполняет скрипт, указанный в поле action.

Как должен выглядеть upload.php?

$uploaddir = "/var/www/uploads/"; if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploaddir. $_FILES["userfile"]["name"])) { print "File is valid, and was successfully uploaded."; } else { print "There some errors!"; }

При написании скрипта, возникает естественный вопрос: как получить информацию о загруженном файле и достучаться до самого файла. Если Вы используете PHP версии 4.1.0 и старше, лучше всего будет обратиться к глобальному массиву $_FILES. Для каждого загруженного файла он содержит хеш-массив, со следующими данными:

• $_FILES["userfile"]["name"] - оригинальное имя файла, такое, каким его видел пользователь, выбирая файл;
• $_FILES["userfile"]["type"] - mime/type файла, к примеру, может быть image/gif; это поле полезно сохранить, если Вы хотите предоставлять интерфейс для скачивания загруженных файлов;
• $_FILES["userfile"]["size"] - размер загруженного файла;
• $_FILES["userfile"]["tmp_name"] - полный путь к временному файлу на диске;
• $_FILES["userfile"]["error"] - Начиная с версии 4.2.0, содержит код ошибки, который равен 0, если операция прошла успешно.

Для PHP версии ниже 4.1.0 этот массив называется $HTTP_POST_FILES. Не стоит забывать, что в отличие от $_FILES этот массив не является суперглобальным и при обращении к нему, к примеру, из функции, необходимо явно указывать global $HTTP_POST_FILES;

Если в настройках Вашего сервера register_globals=on, будут созданы дополнительные переменные вида $userfile_name, $userfile_type, $userfile_size… Учитывая, что, начиная с версии 4.2.0, в настройках по умолчанию register_globals=off использования этих переменных не рекомендовано, даже если они определены. Лучший способ получения информации о загружаемых файлах - использовать массив $_FILES.

Для работы с загруженными файлами лучше всего использовать встроенные функции is_uploaded_file() и move_uploaded_file() , которые проверяют, был ли загружен файл, и помещают его в указанную папку соответственно. Более детальную информацию Вы можете найти на страницах руководства. Не стоит изобретать велосипед и работать самому с временными файлами, копировать их, удалять. Это уже сделано до Вас и для Вас.

Я все сделал правильно, но у меня что-то не работает. Может, у меня неправильно сконфигурирован сервер?

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

В файле php.ini:

• Если Вы хотите узнать, где расположен Ваш php.ini, выполните
• file_uploads - возможность запретить или разрешить загрузку файлов в целом. По умолчанию On.
• upload_max_filesize - максимальный размер файла, который может быть загружен. Если Вам необходимо работать с большими файлами, измените эту настройку. По умолчанию 2М. Не забудьте изменить post_max_size.
• post_max_size - общее ограничение сверху на размер данных, передаваемых в POST запросе. Если Вам необходимо работать с большими файлами, или передавать несколько файлов одновременно, измените эту настройку. Значение по умолчанию 8М.
• upload_tmp_dir - временная директория на сервере, в которую будут помещаться все загружаемые файлы. Проверьте, какие на нее выставлены права(если на данном этапе у Вас возникли сложности, смотрите пояснения в конце статьи). Такая директория должна существовать и у пользователя, под которым выполняется Apache, также должны быть права на запись в эту директорию. Если Вы работаете с включенным ограничением open_basedir - то временный каталог должен находиться внутри. Вам не нужно заботиться о ее чистке или об уникальности имен, PHP решает эту проблему за Вас.

В файле httpd.conf :

• Прежде всего, убедитесь, что Вы используете веб-сервер Apache 1.3 (последняя версия на момент написания статьи - 1.3.27). Если Вы используете Apache 2.0, Вам следует прочитать следующий отрывок из документации:

  Do not use Apache 2.0 and PHP in a production environment neither on Unix nor on Windows.

• Если Вы получили сообщение "POST Method Not Allowed", это означает, что надо искать что-то похожее на следующие директивы, и использовать ключевое слово Allow: Order allow,deny Allow from all
• Проблемы с загрузкой бинарных файлов - классический вопрос "почему бьются файлы при upload". Вот способ решения, предложенный Димой Бородином (http://php.spb.ru): В директории, где лежит скрипт, делаем файл .htaccess , в котором пишем: CharsetDisable On В файл httpd.conf дописать строки: CharsetRecodeMultipartForms Off

Небольшие пояснения, к этому рецепту: вышеописанная проблема, когда загруженные на сервер архивы не распаковываются и картинки не отображаются, может возникать из-за того, что используется веб-сервер Russian Apache. Директива CharsetDisable отключает модуль charset-processing module, т.е. никакой перекодировки при скачивании файлов, находящихся в данной папке, происходить не будет. Директива CharsetRecodeMultipartForms выключает перекодировку данных, переданных методом POST с заголовком Content-Type: multipart/form-data. Т.е. двоичные данные, переданные с такой настройкой, будут оставлены в первоначальном виде, а все остальное наполнение сайта будет перекодировано согласно текущим настройкам сервера.

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

Используйте директиву CharsetRecodeMultipartForms, которая появилась в PL23, но при этом вам все-равно придется перекодировать вручную текстовые части запросов. Для этого можно использовать Russian Apache API, доступное в других модулях или Russian Apache Perl API, доступное из mod_perl.

Один из примеров определения кодировки вы можете найти тут: http://tony2001.phpclub.net/detect_charset/detect.phps

Самая свежая документация по Russian Apache находится на его официальном сайте: http://apache.lexa.ru/.

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

Также возможна настройка параметров Apach с помощью.htaccess:

Php_value upload_max_filesize 50M php_value post_max_size 50M

Пример формы загрузки нескольких файлов:

Send these files:

И не забудьте увеличить post_max_size , если предполагается много файлов

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

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

• Необходимо использовать поле типа BLOB
• Перед тем, как класть в базу, не забыть применить к строке mysql_escape_string()
• При отображении файла необходимо указывать заголовок content/type

Помните, что скрипт отображающий ваш HTML никак не связан со скриптом, который должен выводить изображение. Это должны быть два различные приложения.

Хранение картинок в базе не является хорошем стилем. Гораздо удобней хранить в базе лишь пути к файлам изображений.

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

При загрузке на сервер файлов, необходимо проверять их оригинальные имена на предмет наличия "нестандартных" символов (к примеру русских букв). В случае их присутствия необходимо произвести замену. Оригинальное имя файла можно найти в переменной $_FILES["userfile"]["name"]. Как перекодировать русскоязычную строку в транслит можно можно найти в примерах PHP .

Необходимо учитывать, что до полной загрузки файла, PHP не может оперировать ни размером файла, ни процентом его загрузки. Только когда файл уже находится на сервере PHP, то он получает возможность обращаться к информации. Если вам все-таки крайне необходимо реализовать такую возможность, воспользуйтесь Java-аплетом.

Проблемы с правами на сервере (upload_tmp_dir)

В Unix-подобных операционных системах каждой папке, файлу, ссылке выставлены соответствие права доступа. Они могут выглядеть как rwx-rw-r- или же как число 754.

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

Владелец Группа Прочие (u) (g) (o) rwx rwx rwx

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

r Право на чтение. (4)
w Право на запись. (2)
x Право на выполнение (поиск в каталоге). (1)

Рад видеть Вас на страницах своего сайта. Сегодня поговорим о реализации загрузки файлов на сервер. Тема довольно интересная т.к. многих новичков интересует данный вопрос.

Загрузка файлов на сервер средствами PHP значительно облегчит Ваш труд по наполнению фотогалереи или оформления страницы сайта при помощи редактора (например TinyMCE ). Также Вы можете загружать любые типы файлов на сервер исходя из Ваших задач.

Для того чтобы загрузить файл на сервер нужно создать форму для загрузки файлов. В принципе данная форма не очень сильно отличается от обычной формы с текстовыми полями, за исключением, что type будет не text , а file (так как мы грузим файлы) и в самой форме добавится атрибут enctype="multipart/form-data" . Entype определяет вид кодировки, которую браузер применяет к параметрам формы.

PHP - Загрузка файлов на сервер своими руками #wrap{ width:400px; height:100%; display:block; margin:0 auto; } h2{ text-align:center; } Демо: Загрузка файлов на сервер

Загрузите ваши фотографии на сервер

Форму загрузки файлов мы сделали, самое время написать простой обработчик для загрузки файлов на сервер. Определим сразу, что грузить будем только графические файлы с типом jpeg , png , gif . После того как мы определили типы файлов для загрузки на сервер, нам нужно создать папку на самом сервере, куда мы будем складывать наши файлы. В моем примере это папка image, в нее мы будем складывать наши файлы.