AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Для начала необходимо создать HTML элемент для загрузки файла.
<input id="sortpicture" type="file" name="sortpic" /> <button id="upload">Upload</button>
Далее необходимо дописать JS код:
$('#upload').on('click', function() { var file_data = $('#sortpicture').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); alert(form_data); $.ajax({ url: 'upload.php', dataType: 'text', cache: false, contentType: false, processData: false, data: form_data, type: 'post', success: function(php_script_response){ alert(php_script_response); } }); });
Теперь приступим к PHP скрипту, где загрузим файл на сервер.
upload.php:
<?php if ( 0 < $_FILES['file']['error'] ) { echo 'Error: ' . $_FILES['file']['error'] . '
'; } else { move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); } ?>
Несколько слов о каталоге, в который загружается файл:
- Убедитесь, что путь к каталогу верен
- Каталог должен быть доступен для записи.
Пару слов о PHP функции move_uploaded_file, которая используется в upload.php:
move_uploaded_file( // временное расположение файла $_FILES['file']['tmp_name'], // конечный путь к файлу и его название 'uploads/' . $_FILES['file']['name'] );
$_FILES['file']['name']
— изначальное имя файла. Можете задать своё название:
move_uploaded_file( $_FILES['file']['tmp_name'], 'uploads/my_new_filename.whatever' );
Также стоит убедиться что в конфигурационных настройках PHP, значения upload_max_filesize и post_max_size соответствуют вашим требованиям.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php
Перевел: Станислав Протасевич
Урок создан: 24 Мая 2017
Просмотров: 66690
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.