В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-05-2024! ×
Меню :
download (14)
jquery (42)



Blog (1423)
php (330)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
ruweb.net (36)
js date (33)
php array (33)
form html (30)
online (29)
fonts (26)
Показать еще :
foto (22)
atom (20)
php file (20)
forum (19)
svg (18)
input (18)
hosting (17)
php date (17)
database (17)
board (16)
html book (16)
php time (16)
info (16)
mysql (15)
color (15)
js time (14)
js url (14)
img (14)
js events (14)
select (13)
osclass (13)
знак (13)
htaccess (13)
notepad (13)
dw block (12)
php path (12)
table (12)
download (12)
php img (12)
keyboard (12)
jsphp (11)
icon (11)
form (11)
js delete (10)
keyframes (10)
mouse (10)
yandex (10)
vs code (9)
dosite (9)
hover (9)
chart (9)
browser (8)
php post (7)
comment (7)
php url (7)
list (6)
click (6)
adminka (6)
iframe (6)
canvas (6)
php get (6)
mb (5)
reg.ru (5)
year (5)
js id (5)
tag a (5)
heading (5)
js math (5)
value (5)
ftp (5)
bbcode (4)
php var (4)
base64 (4)
games (4)
xml (4)
day (4)
week (4)
scandir (4)
ssl (4)
task (4)
vk (4)
symbols (4)
month (4)
pages (4)
console (4)
js form (4)
нок (4)
submit (4)
line (3)
https (3)
jquery post (3)
js post (3)
domen (3)
money (3)
numbers (3)
ucoz (3)
captcha (3)
куб (3)
js hash (3)
padding (3)
js img (3)
sitemap (2)
tag hr (2)
height (2)
typeof (2)
arrows (2)
рся (2)
google (2)
qr code (2)
seo (2)
youtube (2)
video (2)
js vars (2)
prompt (2)
counter (2)
details (2)
jino (1)
archive (1)
windows (1)
cursor (1)
speed (1)
нод (1)
rutube (1)
smile (1)
scroll (1)

Как загрузить файл с помощью Ajax jquery

"загрузка файла Ajax" или "Как загрузить файл с помощью Ajax jquery". Разберем загрузку файла пошагово на jquery с помощью Ajax.

Пошаговая инструкция по загрузке файла на сервер.

  1. Форма для загрузки файла на сервер.
  2. Скрипт для обработки данных о файле в Ajax jquery
  3. Файл php для Ajax отправки файла
  4. Скачать

  1. Форма для загрузки файла на сервер.

    Прежде чем приступить к форме для загрузки файла на сервер с помощью Ajax jquery надо сказать пару вводных:

    Сколько всего страниц:

    Страница "html" со скриптом javascript(jquery).

    Страница "php", которая обработает отправленные данные из первой страницы.

    Алгоритм загрузки файла на сервер Ajax?

    В форме выбираем файл.

    Отправляем данные по файлу.

    Во втором файле получаем данные по файлу. Сохраняем его в заранее обговоренной папке.

    Первое, что мы должны сделать?

    Естественно, что первый шагом - самым первым - это подключить jquery

    И наконец форма:

    В форме будут три поля:

    input с типом file

    <input id="picture" type="file">

    Кнопка button - по нажатию на которую будут отправлены данные о файле:

    <button id="upload">Загрузить</button>

    И третье поле - это div - куда вернём результат работы php файла.

    <div id="tores"></div>
    Форма для отправки данных о файле в сборе:

    <input id="picture" type="file">
    <button id="upload">Загрузить</button>
    <div id="tores"></div>


  2. Скрипт для обработки данных о файле в Ajax jquery

    Далее... "Скрипт для обработки данных о файле в Ajax":

    Выбрали в форме файл - нажимаем "загрузить"... click:

    $('#upload').on('click', function() {

    Получаем данные из формы в переменную:

    var file_data = $('#picture').prop('files')[0];

    Чтобы понимать о чем идет речь... в выше приведенной строке - давайте выведем в консоль

    console.log($('#picture').prop('files')[0]);

    И получим:

    Нажмите, чтобы открыть в новом окне.
    Скрипт для обработки данных о файле в Ajax jquery

    Новая переменная с FormData

    var form_data = new FormData();

    Добавляем в FormData новый ключ со значением - данные нашего файла.

    form_data.append('file', file_data);

    Далее... функция, в которой отправляем данные нашего файла...

    $.ajax({

    Отметим только те строки, который нам нужны для понимания... нам нужен параметр

    url: здесь прописываем адрес до нашего php файла.

    И... заканчиваем запрос(success), внутрь помещаем функцию с параметром(любым - здесь "response") ... внутри "response" будет возвращенные данные...

    success: function(response){

    В поле №3 формы(id=tores(обращаемся к id)) с помощью innerHTML отправляем, что нам вернул файл php:

    tores.innerHTML = response;

    Понимание остального придет со временем...

    Собираем весь скрипт 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>


  3. Файл php для Ajax отправки файла

    Ну и файл php, который получит массив: $_FILES

    Переместить файл из временной папки - в нашу: move_uploaded_file.

    И выдаст результат через echo

    Подробнее:

    Где "error" - проверяем на ошибки...

    Далее "else". Путь до файла... __DIR__ добавляем слеш .'/' - файл будет сохраняться в папке. где лежит файл "php". + возвращаем файлу его название $_FILES['file']['name']

    __DIR__.'/' . $_FILES['file']['name']

    Если файл уже существует is_file, выводим:

    echo 'Такой файл уже существует';

    Иначе перемешаем загруженный файл из временной папки по умолчанию "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 'файл не создан';

        }

      }

    }

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
ajax загрузка файлов ajax загрузка файлов на сервер загрузка файла php ajax загрузка файла на сервер php ajax загрузка файла через ajax jquery ajax загрузка файлов загрузка нескольких файлов ajax ajax форма загрузки файла
Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.026685 секунд. Подробнее