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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb Немного о ruweb.net!
Страница загружена за : 0.020001 секунд. Подробнее