Как загрузить файл с помощью Ajax jquery
Пошаговая инструкция по загрузке файла на сервер.
- Форма для загрузки файла на сервер.
- Скрипт для обработки данных о файле в Ajax jquery
- Файл php для Ajax отправки файла
- Скачать можно здесь
Форма для загрузки файла на сервер.
Прежде чем приступить к форме для загрузки файла на сервер с помощью Ajax jquery надо сказать пару вводных:
Сколько всего страниц:
Страница "html" со скриптом javascript(jquery).
Страница "php", которая обработает отправленные данные из первой страницы.
В форме выбираем файл.
Отправляем данные по файлу.
Во втором файле получаем данные по файлу. Сохраняем его в заранее обговоренной папке.
Первое , что мы должны сделать?
Естественно, что первый шагом - самым первым - это подключить jquery
В форме будут три поля:
input с типом file
Кнопка button - по нажатию на которую будут отправлены данные о файле:
И третье поле - это div - куда вернём результат работы php файла.
<button id="upload">Загрузить</button>
<div id="tores"></div>
Скрипт для обработки данных о файле в Ajax jquery
Далее... "Скрипт для обработки данных о файле в Ajax":Выбрали в форме файл - нажимаем "загрузить"... click:
Получаем данные из формы в переменную:
Чтобы понимать о чем идет речь... в выше приведенной строке - давайте выведем в консоль
И получим:
Новая переменная с FormData
Добавляем в FormData новый ключ со значением - данные нашего файла.
Далее... функция, в которой отправляем данные нашего файла...
Отметим только те строки, который нам нужны для понимания... нам нужен параметр
И... заканчиваем запрос(success), внутрь помещаем функцию с параметром(любым - здесь "response") ... внутри "response" будет возвращенные данные...
В поле №3 формы(id=tores(обращаемся к id)) с помощью innerHTML отправляем, что нам вернул файл php:
Понимание остального придет со временем...
Собираем весь скрипт Ajax отправки данных.
<script>
$('#upload').on('click', function() {
var file_data = $('#picture').prop('files')[0];
console.log( $('#picture').prop('files')[0]) ;
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'https://dwweb.ru/путь_до_файла/jquery_file.php',
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(response)
{
tores.innerHTML = response;
}
});
});
</script>
Файл php для Ajax отправки файла
Ну и файл php, который получит массив: $_FILES
Переместить файл из временной папки - в нашу: move_uploaded_file.
И выдаст результат через echo
Где "error" - проверяем на ошибки...
Далее "else". Путь до файла... __DIR__ добавляем слеш
Если файл уже существует is_file, выводим:
Иначе перемешаем загруженный файл из временной папки по умолчанию "tmp/" по нашему пути :
И в зависимости от результата с помощью echo выводим - файл загружен - файл не загружен
Php файл Ajax загрузка файла:
Соберем весь код php файла, который примет и обработает Ajax запрос по загрузке файла.
<?
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else
{
if(is_file(__DIR__.'/' . $_FILES['file']['name']))
{
echo 'Такой файл уже существует';
}
else
{
move_uploaded_file($_FILES['file']['tmp_name'], __DIR__.'/' . $_FILES['file']['name']);
if(is_file(__DIR__.'/' . $_FILES['file']['name']))
{
echo 'файл создан';
}
else
{
echo 'файл не создан';
}
}
}
ajax загрузка файлов
ajax загрузка файлов на сервер
загрузка файла php ajax
загрузка файла на сервер php ajax
загрузка файла через ajax
jquery ajax загрузка файлов
загрузка нескольких файлов ajax
ajax форма загрузки файла

подробнее.
подробнее.