СКРИПТЫ
ТЕГИ:
php (319)
js (238)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
js date (32)
php array (31)
form html (30)
fonts (27)
link (26)
Показать еще :
online (25)
ruweb.net (24)
foto (22)
php file (21)
atom (20)
forum (19)
hosting (18)
svg (18)
php date (17)
board (16)
html book (16)
input (16)
php time (16)
color (15)
js events (14)
js url (14)
notepad (13)
osclass (13)
htaccess (13)
img (13)
js time (13)
php img (12)
select (12)
знак (12)
table (12)
dw block (12)
info (12)
php path (12)
download (11)
keyboard (11)
jsphp (11)
form (11)
icon (11)
mouse (10)
yandex (10)
js delete (10)
hover (9)
dosite (8)
comment (7)
cookie (7)
php url (7)
year (6)
mysql (6)
iframe (6)
browser (6)
list (6)
click (6)
php get (6)
adminka (5)
tag a (5)
js math (5)
chart (5)
heading (5)
reg.ru (5)
mb (5)
search (5)
ftp (5)
js id (5)
value (5)
base64 (4)
week (4)
day (4)
ssl (4)
bbcode (4)
нок (4)
vk (4)
js form (4)
submit (4)
php var (4)
month (4)
pages (4)
symbols (4)
task (4)
console (4)
куб (3)
captcha (3)
domen (3)
js post (3)
line (3)
ucoz (3)
numbers (3)
padding (3)
js img (3)
https (3)
js hash (3)
vs code (3)
scandir (3)
рся (2)
seo (2)
prompt (2)
counter (2)
height (2)
google (2)
details (2)
js vars (2)
video (2)
sitemap (2)
tag hr (2)
youtube (2)
arrows (2)
typeof (2)
money (2)
qr kod (2)
нод (1)
rutube (1)
jino (1)
cursor (1)
header (1)
speed (1)
windows (1)
archive (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 'файл не создан';

        }

      }

    }

Можете не благодарить, лучше помогите!
Название скрипта :Загрузка файла на сервер $.ajax()
Ссылка на скачивание : Все скрипты на одной странице
Теги :
ajax загрузка файлов
ajax загрузка файлов на сервер
загрузка файла php ajax
загрузка файла на сервер php ajax
загрузка файла через ajax
jquery ajax загрузка файлов
загрузка нескольких файлов ajax
ajax форма загрузки файла
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.021433 секунд. Подробнее