Наверное многие сталкивались с вопросом "Как загрузить файл на сервер с помощью 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 значительно облегчит Ваш труд по наполнению фотогалереи или оформления страницы сайта при помощи редактора (например 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, в нее мы будем складывать наши файлы.