Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310

Php скрипт по нажатию кнопки без перезагрузки

04.06.2023, 13:16. Показов 1346. Ответов 26

Студворк — интернет-сервис помощи студентам
Добрый день! На форме есть Input и есть кнопка для загрузки фото на сервер. Проблема в том что если я заполню input а потом загружаю фото через POST['submit'] то фото сохраняется на сервер а поле input становится пустым т.к. страница перезагружается. Приходится сначала загружать фото а потом заполнять поля и нажимать кнопку Добавить чтобы все сохранилось в БД. Как исправить код чтобы страница не перезагружалась и поле оставалось заполнено по нажатию кнопки с id="upload"?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<form method="post" action="do_insertdetails.php">
 <a href="Stock.php" style="display: flex; justify-content:right;">X</a>
         <h3 style="display: flex; justify-content:center;">Добавить деталь</h3>
         <table cellpadding="10" cellspacing="1">
          <tr>
           <td id="col3"> <select name="stellazh">
              <option>Стеллаж</option>
              <option>С1</option>
              <option>С2</option>
              <option>С3</option>
              <option>С4</option>
              <option>С5</option>
              <option>С6</option>
              <option>С7</option>
              <option>С8</option>
              <option>Временный</option>
            </select>
        </td>
        <td id="col3"> <select name="polka">
              <option>Полка</option>
              <option>П1</option>
              <option>П2</option>
              <option>П3</option>
              <option>П4</option>
              <option>П5</option>
              <option>Без полки</option>
              </select>
        </td>
        <td id="col3">
           <select name="korobka">
              <option>Коробка</option>
              <option>К1</option>
              <option>К2</option>
              <option>К3</option>
              <option>К4</option>
              <option>К5</option>
              <option>К6</option>
              <option>К7</option>
              <option>К8</option>
              <option>Без коробки</option>
              </select>
        </td>
        </tr>
  </table>
                     <p>
                     <input type="submit" name="submit" value="Добавить" style="display: block; margin:0 auto;"/>
                </p>
</form>
<h3 style="margin-top:10px">Загрузите фото</h3>
<!--------------Загрузка ФОТО------------------------------------------------->
<form metod="post" enctype="multipart/form-data" style="display:flex;">
 <input type="file"  name="image" required>
 <button type="button" id="upload" >Загрузить</button>
 </form>
JavaScript
1
2
3
4
5
6
7
8
9
10
<script>
$('#upload').on('click', function(){
$.ajax({
  url: 'upload.php',
  success: function(data) {
   alert('Success')
  }
 });
})
</script>
Миниатюры
Php скрипт по нажатию кнопки без перезагрузки  
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
04.06.2023, 13:16
Ответы с готовыми решениями:

Как запустить PHP скрипт по нажатию кнопки?
Здравствуйте! Уже несколько дней не могу решить вопрос, искал ответ в разных областях - не смог разобраться. Дайте ответ, либо...

Как запустить PHP скрипт по нажатию кнопки
Здравствуйте На HTML странице есть кнопка после нажатия которой надо запустить скрипт PHP после которого запускается bash...

Оценить значение поля (выполнить php-скрипт) без перезагрузки страницы
Приветствую. Есть форма (текстовое поле в ней и две кнопки). В текстовое поле вводится ответ на некоторый вопрос, который представлен выше...

26
321 / 189 / 78
Регистрация: 04.10.2016
Сообщений: 809
04.06.2023, 13:44
HTML5
1
2
3
4
5
6
<form method="post" id="uploadForm">
    <!--ваши разметки-->
    <input type="file"  name="image" required>
    <!--ваши разметки-->
    <input type="submit" name="submit" value="Добавить" style="display: block; margin:0 auto;"/>
</form>
JavaScript
1
2
3
4
5
6
7
8
9
$("#uploadForm").on("submit", function(e){
    e.preventDefault();
    $.ajax({
      url: 'upload.php',
      success: function(data) {
       alert('Success')
      }
    });
});

Не по теме:

это тема не php

0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
04.06.2023, 14:01  [ТС]
Цитата Сообщение от Fart83 Посмотреть сообщение
это тема не php
Не срабатывает. У меня на форме есть две кнопи. Кнопка сохранения записи после того как загрузили фото и получили имя картинки
HTML5
1
<input type="submit" name="submit" value="Добавить" style="display: block; margin:0 auto;"/>
и кнопка загрузки фото которая должна выполнить код в файле upload
HTML5
1
2
3
4
<form metod="post" enctype="multipart/form-data" style="display:flex;">
 <input type="file"  name="image" required>
 <button type="submit" >Загрузить</button>
 </form>
я сделал. Но файл upload не запускается
Вот полный код страницы
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<body>
   
       <div class="wrapper">
        <div class="container">
        <div class="login-form">
          
    <form class="" method="post" id="upload" action="do_insertdetails.php">
         
        <a href="Stock.php" style="display: flex; justify-content:right;">X</a>
         <h3 style="display: flex; justify-content:center;">Добавить деталь</h3>
      
           <table cellpadding="10" cellspacing="1">
          <tr>
               <td id="col1"><input type="text" id="articul" name="articul" placeholder="Артикул"></td>
               <td id="col1"><input type="text" id="manufacturer" name="manufacturer" placeholder="Производитель"></td>
               <td id="col1"><input type="text" id="detail" name="detail" placeholder="Название детали"></td>
          </tr>
          <tr>
               <td id="col3"><input type="number" inputmode="numeric" id="quantity" name="quantity" placeholder="Количество" required ></td>
               <td id="col1"><input type="number" inputmode="numeric" id="price" name="price" placeholder="Цена"></td>
               <td id="col1"><input type="number" inputmode="numeric" id="partiya" name="partiya" placeholder="Партия" required></td>
          </tr>
           <tr>
           <td id="col1">
                    <select name="magazine">
                      <option>Магазин</option>
                      <option>Окружная</option>
                      <option>Калинина</option>
                </select>
                </td>
           <td id="col1">
           <select name="sostoyanie">
                  <option>Состояние</option>
                  <option>Новая</option>
                  <option>Б/У</option>
               </select></td>
           <td id="col1"><input type="text" id="comment" name="comment" placeholder="Комментарий"></td>
          </tr>
          <tr>
           <td id="col3"> <select name="stellazh">
              <option>Стеллаж</option>
              <option>С1</option>
              <option>С2</option>
              <option>С3</option>
              <option>С4</option>
              <option>С5</option>
              <option>С6</option>
              <option>С7</option>
              <option>С8</option>
              <option>Временный</option>
            </select>
        </td>
        <td id="col3"> <select name="polka">
              <option>Полка</option>
              <option>П1</option>
              <option>П2</option>
              <option>П3</option>
              <option>П4</option>
              <option>П5</option>
              <option>Без полки</option>
              </select>
        </td>
        <td id="col3">
           <select name="korobka">
              <option>Коробка</option>
              <option>К1</option>
              <option>К2</option>
              <option>К3</option>
              <option>К4</option>
              <option>К5</option>
              <option>К6</option>
              <option>К7</option>
              <option>К8</option>
              <option>Без коробки</option>
              </select>
        </td>
        </tr>
  </table>
        <p>
         <input type="submit" name="submit" value="Добавить" style="display: block; margin:0 auto;"/>
        </p>
 </form>
<!----------------------- Загрузка ФОТО------------------------------------------------>
* Выберите фото(если нужно), нажмите Загрузить! Затем заполните данные.
<h3 style="margin-top:10px">Загрузите фото</h3>
<form method="post" enctype="multipart/form-data" style="display:flex;">
 <input type="file" name="image" required>
 <button type="submit" >Загрузить</button>
</form>
<div style="margin-top:3px">
<?flash()?>
<?flashg()?>
 </div>
</div>
</div>
</div>
<script>
    $("#upload").on("submit", function(e){
    e.preventDefault();
    $.ajax({
      url: 'upload.php',
      success: function(data) {
       alert('Success')
      }
    });
});
</script>
</body>
0
Заблокирован
04.06.2023, 18:18
Цитата Сообщение от gena8208 Посмотреть сообщение
$("#upload")
А где подключение библиотеки jQuery? Инструментом разработчика в браузере умеете пользоваться? Посмотрите на вкладку Console. Там будет показаны ошибки. Или на вкладку Network

Добавлено через 4 минуты
Цитата Сообщение от gena8208 Посмотреть сообщение
<?flash()?>
Короткий открывающий тег лучше не использовать.
1
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
04.06.2023, 18:28  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
А где подключение библиотеки jQuery?
JavaScript
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
вы об этом? Да она есть. Я просто тысячу раз код менял и добавлял и удалял.
Цитата Сообщение от bbkk Посмотреть сообщение
Посмотрите на вкладку Console. Там будет показаны ошибки. Или на вкладку Network
НЕ совсем умею или совсем не умею. Открывал и Console и Network ни каких ошибок не было
Миниатюры
Php скрипт по нажатию кнопки без перезагрузки  
0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
04.06.2023, 18:34  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
Короткий открывающий тег лучше не использовать.
Буду иметь ввиду. Видимо такие мануалы мне попадаются
0
Заблокирован
04.06.2023, 19:02
Цитата Сообщение от gena8208 Посмотреть сообщение
Но файл upload не запускается
Вот это $("#upload") относиться к первой форме, где кнопка Добавить. Потому что там id="upload"
Проставьте правильно айди или класс для нужной формы. Или просто так

JavaScript
1
$("form").on("submit", function(e){
0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
04.06.2023, 20:02  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
Проставьте правильно айди или класс для нужной формы. Или просто так
Я на всякий скину еще раз полный код страницы. Кнопка Добавить обращается к файлу do_insertdetails.php но только после того как мы получим имя залитой фото через кнопку Загрузить через код из upload.php.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
   <div class="wrapper">
        <div class="container">
        <div class="login-form">
       <form method="post" action="do_insertdetails.php">
        <a href="Stock.php" style="display: flex; justify-content:right;">X</a>
 
        <!-- поля для занесения в базу ------>
                     
                     <p>
                     <input type="submit" name="submit" value="Добавить" style="display: block; margin:0 auto;"/>
                     </p>
</form>
* Выберите фото(если нужно), нажмите Загрузить! Затем заполните данные.
<h3 style="margin-top:10px">Загрузите фото</h3>
<form method="post" enctype="multipart/form-data" style="display:flex;">
     <input type="file" name="image" required>
     <button type="submit" name="imageupload">Загрузить</button>
</form>
 
<div style="margin-top:3px">
<?php flash()?>
<?php flashg()?>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $("form").on("imageupload", function(e){
    e.preventDefault();
    $.ajax({
      url: 'upload.php',
      success: function(data) {
       alert('Success')
      }
    });
});
</script>
</body>
Это еще вид окна тестовый и база пока тестовая. Так, что сильно не ругайтесь за дизайн )
Миниатюры
Php скрипт по нажатию кнопки без перезагрузки  
0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
04.06.2023, 20:05  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
Вот это $("#upload") относиться к первой форме, где кнопка Добавить. Потому что там id="upload"
я куда только не ставил id="upload" и в верхнюю форму где поля и в нижнюю где кнопка загрузить и теперь вообще без id но ни чего не происходит и консоли ошибок нет. Что то я с этими кнопками submit на одной форме наверное нафигачил
0
Заблокирован
04.06.2023, 20:53
Цитата Сообщение от gena8208 Посмотреть сообщение
но ни чего не происходи
До конца не понял, что должно происходить, но по крайней мере аякс-запрос летит
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html><html lang="ru">
<head><title>test</title></head>
<body>
<div class="wrapper">
    <div class="container">
        <div class="login-form">
 
            <form class="" method="post" id="upload" action="do_insertdetails.php">
 
                <a href="Stock.php" style="display: flex; justify-content:right;">X</a>
                <h3 style="display: flex; justify-content:center;">Добавить деталь</h3>
 
                <table cellpadding="10" cellspacing="1">
                    <tr>
                        <td id="col1"><input type="text" id="articul" name="articul" placeholder="Артикул"></td>
                        <td id="col1"><input type="text" id="manufacturer" name="manufacturer" placeholder="Производитель"></td>
                        <td id="col1"><input type="text" id="detail" name="detail" placeholder="Название детали"></td>
                    </tr>
                    <tr>
                        <td id="col3"><input type="number" inputmode="numeric" id="quantity" name="quantity" placeholder="Количество" required ></td>
                        <td id="col1"><input type="number" inputmode="numeric" id="price" name="price" placeholder="Цена"></td>
                        <td id="col1"><input type="number" inputmode="numeric" id="partiya" name="partiya" placeholder="Партия" required></td>
                    </tr>
                    <tr>
                        <td id="col1">
                            <select name="magazine">
                                <option>Магазин</option>
                                <option>Окружная</option>
                                <option>Калинина</option>
                            </select>
                        </td>
                        <td id="col1">
                            <select name="sostoyanie">
                                <option>Состояние</option>
                                <option>Новая</option>
                                <option>Б/У</option>
                            </select></td>
                        <td id="col1"><input type="text" id="comment" name="comment" placeholder="Комментарий"></td>
                    </tr>
                    <tr>
                        <td id="col3"> <select name="stellazh">
                                <option>Стеллаж</option>
                                <option>С1</option>
                                <option>С2</option>
                                <option>С3</option>
                                <option>С4</option>
                                <option>С5</option>
                                <option>С6</option>
                                <option>С7</option>
                                <option>С8</option>
                                <option>Временный</option>
                            </select>
                        </td>
                        <td id="col3"> <select name="polka">
                                <option>Полка</option>
                                <option>П1</option>
                                <option>П2</option>
                                <option>П3</option>
                                <option>П4</option>
                                <option>П5</option>
                                <option>Без полки</option>
                            </select>
                        </td>
                        <td id="col3">
                            <select name="korobka">
                                <option>Коробка</option>
                                <option>К1</option>
                                <option>К2</option>
                                <option>К3</option>
                                <option>К4</option>
                                <option>К5</option>
                                <option>К6</option>
                                <option>К7</option>
                                <option>К8</option>
                                <option>Без коробки</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="submit" name="submit" value="Добавить" style="display: block; margin:0 auto;"/>
                </p>
            </form>
            <!----------------------- Загрузка ФОТО------------------------------------------------>
            * Выберите фото(если нужно), нажмите Загрузить! Затем заполните данные.
            <h3 style="margin-top:10px">Загрузите фото</h3>
            <form id="form_2"  method="post" enctype="multipart/form-data" style="display:flex;">
                <input type="file" name="image" required>
                <button type="submit" >Загрузить</button>
            </form>
            <div style="margin-top:3px">
                <?flash()?>
                <?flashg()?>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $("#form_2").on("submit", function(e){
        e.preventDefault();
        $.ajax({
            url: 'upload.php',
            success: function(data) {
                alert('Success')
            }
        });
    });
</script>
</body>
</html>
Добавлено через 29 минут
Сокращенно

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.............
 
<form id="form_2"  method="post" enctype="multipart/form-data" style="display:flex;">
                <input id="image" type="file" name="image" required>
                <button type="submit" >Загрузить</button>
            </form>
...............
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $("#form_2").on("submit", function(e){
        e.preventDefault();     
        let formData = new FormData();
        formData.append("file", image.files[0]);
 
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            success: function (data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
</script>
Файл upload.php для проверки. Код не полный.

PHP
1
2
3
$filename = $_FILES['file']['name'];
echo $filename;
//остальное как обычно при загрузке файлов
1
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
05.06.2023, 09:37  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
formData.append("file", image.files[0]);
немного подправил Ваш код на
Code
1
formData.append("image", image.files[0]);
вставил и тоже немного исправил в файле upload для проверки. Да имя файла показало. Файл на сервер загрузился но flash не показывает на форме, что файл успешно загружен. Когда я нажимаю Ctrl+F5 то flash показывает на форме файл успешно загружен. И при нажатии на кнопку Загрузить появляется пустое окно сверху. Подтвердите действие на странице. Нажимаю ок и файл появляется на сервере, но сообщение об этом я не вижу. Я так подозреваю что раз страница строками написанными ниже не обновляется то и сообщение не появится. Если я их раскомментирую то там пишется содержимое файла с этой формой во всплывающем окне.
PHP
1
2
3
  flashg('Фото успешно добавлено в базу');
// header('Location: ins1.php');
// header('Location: '. $_SERVER['HTTP_REFERER']);
КОД ФАЙЛА upload.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<?php
require_once __DIR__.'/boot.php';
// Если в $_FILES существует "image" и она не NULL
if (isset($_FILES['image'])) {
//    $filename = $_FILES['image']['name'];
//echo $filename;
// Получаем нужные элементы массива "image"
$fileTmpName = $_FILES['image']['tmp_name'];
$errorCode = $_FILES['image']['error'];
// Проверим на ошибки
if ($errorCode !== UPLOAD_ERR_OK || !is_uploaded_file($fileTmpName)) {
    // Массив с названиями ошибок
    $errorMessages = [
      UPLOAD_ERR_INI_SIZE   => 'Размер файла превысил значение upload_max_filesize в конфигурации PHP.',
      UPLOAD_ERR_FORM_SIZE  => 'Размер загружаемого файла превысил значение MAX_FILE_SIZE в HTML-форме.',
      UPLOAD_ERR_PARTIAL    => 'Загружаемый файл был получен только частично.',
      UPLOAD_ERR_NO_FILE    => 'Файл не был загружен.',
      UPLOAD_ERR_NO_TMP_DIR => 'Отсутствует временная папка.',
      UPLOAD_ERR_CANT_WRITE => 'Не удалось записать файл на диск.',
      UPLOAD_ERR_EXTENSION  => 'PHP-расширение остановило загрузку файла.',
    ];
    // Зададим неизвестную ошибку
    $unknownMessage = 'При загрузке файла произошла неизвестная ошибка.';
    // Если в массиве нет кода ошибки, скажем, что ошибка неизвестна
    $outputMessage = isset($errorMessages[$errorCode]) ? $errorMessages[$errorCode] : $unknownMessage;
    // Выведем название ошибки
    die($outputMessage);
} else {
    // Создадим ресурс FileInfo
    $fi = finfo_open(FILEINFO_MIME_TYPE);
    // Получим MIME-тип
    $mime = (string) finfo_file($fi, $fileTmpName);
    // Проверим ключевое слово image (image/jpeg, image/png и т. д.)
    if (strpos($mime, 'image') === false) die('Можно загружать только изображения.');
 
    // Результат функции запишем в переменную
    $image = getimagesize($fileTmpName);
 
    // Зададим ограничения для картинок
    $limitBytes  = 1024 * 1024 * 5;
    $limitWidth  = 1280;
    $limitHeight = 1024;
 
    // Проверим нужные параметры
    if (filesize($fileTmpName) > $limitBytes) die('Размер изображения не должен превышать 5 Мбайт.');
    if ($image[1] > $limitHeight)             die('Высота изображения не должна превышать 1024 точек.');
    if ($image[0] > $limitWidth)              die('Ширина изображения не должна превышать 1280 точек.');
 
    // Сгенерируем новое имя файла через функцию getRandomFileName()
    $name = getRandomFileName($fileTmpName);
 
    // Сгенерируем расширение файла на основе типа картинки
    $extension = image_type_to_extension($image[2]);
 
    // Сократим .jpeg до .jpg
    $format = str_replace('jpeg', 'jpg', $extension);
 
    // Переместим картинку с новым именем и расширением в папку /upload
    if (!move_uploaded_file($fileTmpName, __DIR__ . '/upload/' . $name . $format)) {
        die('При записи изображения на диск произошла ошибка.');
    }
      
      // -----------------------------Какая-то борода вот тут----- Я отправляю страницу саму на себя после выполнения кода
     // чтобы можно было несколько деталей с фото добавить в базу поочереди
   //  session_start();
  $imgname = $name; $_SESSION['imgname'] = $imgname;
   $imgformat = $format; $_SESSION['imgformat'] = $imgformat;
   //echo $imgname;
  flashg('Фото успешно добавлено в базу');
 // header('Location: ins1.php');
header('Location: '. $_SERVER['HTTP_REFERER']);
  }
};
function getRandomFileName($path)
{
  $path = $path ? $path . '/' : '';
  do {
      $name = md5(microtime() . rand(0, 9999));
      $file = $path . $name;
  } while (file_exists($file));
 
  return $name;
}
Миниатюры
Php скрипт по нажатию кнопки без перезагрузки  
0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
05.06.2023, 09:47  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
До конца не понял, что должно происходить, но по крайней мере аякс-запрос летит
Когда клиент вызывает эту форму с полями. Он заполняет поля и загружает фото на сервер, затем появляется сообщение что фото успешно добавлено, клиент нажимает на кнопку Добавить и все сохраняется в базе. Но у меня получилось так, что клиент заполнил поля, нажимает кнопку Загрузить фото, то после загрузки фото появляется сообщение что фото загружено, НО ОЧИЩАЮТСЯ ВСЕ ПОЛЯ. Поэтому я заморочился с этой кнопкой без перезагрузки. А то клиент загрузит фото не заполнит поля и перейдет в другое окно и потом эти файлы будут со временем копиться. Тут нюанс в том что к некоторым позициям в базе нужны фото а к некоторым нет, вот и сделано 2 кнопки загрузить и добавить. Если нужна фото, то сначала получаю сгенерированное имя файла а уже потом с данными из полей заносится в базу.
0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
05.06.2023, 09:51  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
До конца не понял
Должно быть как на фото. Заполнил поля, выбрал фото, нажал загрузить, нажал добавить.
Миниатюры
Php скрипт по нажатию кнопки без перезагрузки  
0
Заблокирован
05.06.2023, 10:50
Цитата Сообщение от gena8208 Посмотреть сообщение
НО ОЧИЩАЮТСЯ ВСЕ ПОЛЯ.
Так счас норм или нет? Я проверил. У меня не очищаются.
0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
05.06.2023, 10:55  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
Так счас норм или нет?
Поля не очищаются. Фото на сервер заливается, но сообщение сверху Подтвердить действие на странице появляется и сообщение о том что файл успешно загружен не появляется
0
Заблокирован
05.06.2023, 11:30
Цитата Сообщение от gena8208 Посмотреть сообщение
flashg('Фото успешно добавлено в базу');
Заменить на echo "es";

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
...............
 
    <button type="submit" >Загрузить</button>
            </form>
            <div id="es_foto" style="margin-top:3px; display: none;background: green; color: white; padding: 3px; text-align: center;">
            Файл успешно добавлен в базу
            </div>
        </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $("#form_2").on("submit", function(e){
        e.preventDefault();
        let formData = new FormData();
        formData.append("file", image.files[0]);
 
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            success: function (data) {
                if(data=='es')
                document.querySelector('#es_foto').style.display='block';
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
</script>
0
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
05.06.2023, 11:53  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
Заменить на echo "es";
Что то не так в вашем коде. второго закрытия form получается нет. в upload добавил echo "es";. Ни чего не появляется. Перед этим кодом вместо flash в upload я просто добавил
PHP
1
echo "Файл успешно загружен";
. Появлялось это сообщение. Не красиво конечно но было видно что файл загружен
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<body>
   
       <div class="wrapper">
        <div class="container">
        <div class="login-form">
        <form method="post" action="do_insertdetails.php">
         
        <a href="Stock.php" style="display: flex; justify-content:right;">X</a>
         <h3 style="display: flex; justify-content:center;">Добавить деталь</h3>
      
           <table cellpadding="10" cellspacing="1">
          <tr>
               <td id="col1"><input type="text" id="articul" name="articul" placeholder="Артикул"></td>
               <td id="col1"><input type="text" id="manufacturer" name="manufacturer" placeholder="Производитель"></td>
               <td id="col1"><input type="text" id="detail" name="detail" placeholder="Название детали"></td>
          </tr>
          <tr>
               <td id="col3"><input type="number" inputmode="numeric" id="quantity" name="quantity" placeholder="Количество" required ></td>
               <td id="col1"><input type="number" inputmode="numeric" id="price" name="price" placeholder="Цена"></td>
               <td id="col1"><input type="number" inputmode="numeric" id="partiya" name="partiya" placeholder="Партия" required></td>
          </tr>
           <tr>
           <td id="col1">
                    <select name="magazine">
                      <option>Магазин</option>
                      <option>Окружная</option>
                      <option>Калинина</option>
                </select>
                </td>
           <td id="col1">
           <select name="sostoyanie">
                  <option>Состояние</option>
                  <option>Новая</option>
                  <option>Б/У</option>
               </select></td>
           <td id="col1"><input type="text" id="comment" name="comment" placeholder="Комментарий"></td>
          </tr>
          <tr>
           <td id="col3"> <select name="stellazh">
              <option>Стеллаж</option>
              <option>С1</option>
              <option>С2</option>
              <option>С3</option>
              <option>С4</option>
              <option>С5</option>
              <option>С6</option>
              <option>С7</option>
              <option>С8</option>
              <option>Временный</option>
            </select>
        </td>
        <td id="col3"> <select name="polka">
              <option>Полка</option>
              <option>П1</option>
              <option>П2</option>
              <option>П3</option>
              <option>П4</option>
              <option>П5</option>
              <option>Без полки</option>
              </select>
        </td>
        <td id="col3">
           <select name="korobka">
              <option>Коробка</option>
              <option>К1</option>
              <option>К2</option>
              <option>К3</option>
              <option>К4</option>
              <option>К5</option>
              <option>К6</option>
              <option>К7</option>
              <option>К8</option>
              <option>Без коробки</option>
              </select>
        </td>
        </tr>
  </table>
                     <p>
                     <input type="submit" name="submit" value="Добавить" style="display: block; margin:0 auto;"/>
                     </p>
</form>
* Выберите фото(если нужно), нажмите Загрузить! Затем заполните данные.
<h3 style="margin-top:10px">Загрузите фото</h3>
<form id="form_2" method="post" enctype="multipart/form-data" style="display:flex;">
     <input type="file" id="image" name="image" required>
     <button type="submit" >Загрузить</button>
            </form>
            <div id="es_foto" style="margin-top:3px; display: none;background: green; color: white; padding: 3px; text-align: center;">
            Файл успешно добавлен в базу
            </div>
        </div>
 
 
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("#form_2").on("submit", function(e){
        e.preventDefault();
        let formData = new FormData();
        formData.append("file", image.files[0]);
 
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            success: function (data) {
                if(data=='es')
                document.querySelector('#es_foto').style.display='block';
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
</script>
</body>
0
Заблокирован
05.06.2023, 12:12
Цитата Сообщение от gena8208 Посмотреть сообщение
echo "Файл успешно загружен";
Это будет возвращаться в data. В таком случае надо проверять if(data=='Файл успешно загружен')
Цитата Сообщение от gena8208 Посмотреть сообщение
Что то не так в вашем коде.
Другого у меня нет. Я перед тем как предлагать, проверял у себя.
1
4 / 4 / 1
Регистрация: 20.12.2019
Сообщений: 310
05.06.2023, 12:29  [ТС]
Цитата Сообщение от bbkk Посмотреть сообщение
Другого у меня нет. Я перед тем как предлагать, проверял у себя.
Спасибо, что много помогли с ajax буду думать что и как лучше сделать

Добавлено через 1 минуту
Цитата Сообщение от bbkk Посмотреть сообщение
В таком случае надо проверять
Я думаю там уже больше нечего проверять. Если при загрузке фото возникают ошибки то они просто до этого echo не дойдут. Но не точно ))

Добавлено через 5 минут
Цитата Сообщение от bbkk Посмотреть сообщение
Заменить на echo "es";
интересно почему echo работает а flash не срабатывает. не понятно

Добавлено через 4 минуты
Цитата Сообщение от bbkk Посмотреть сообщение
flashg('Фото
потому что flash в файле boot а он require_once __DIR__.'/boot.php'; значит наверное только после перезагрузки
0
Заблокирован
05.06.2023, 12:53
Цитата Сообщение от gena8208 Посмотреть сообщение
Должно быть как на фото.
Не совсем так, но почти)
Код выкладывал ранее.
Миниатюры
Php скрипт по нажатию кнопки без перезагрузки  
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.06.2023, 12:53
Помогаю со студенческими работами здесь

Ajax. Отправка данных в БД, по нажатию кнопки, без перезагрузки станицы
Всем привет! Сразу извиняюсь за банальный вопрос, я только начал заниматься данными технологиями. Меня интересует, как можно при нажатии...

Замена контента по нажатию ссылки без перезагрузки страницы с AJAX
Вопрос такой. Как сделать, чтобы при нажатии на одну из ссылок, менялся контент на странице без ее перезагрузки с помощью AJAX? Есть...

Исполнение PHP-скрипта без перезагрузки страницы и без знания JavaScript(!) - Xajax
Приветствую! Решил запостить отдельной темой, а в прилепленной (про Ajax) просто разместить на нее ссылку. Так будет структурно правильнее,...

Не срабатывает скрипт по нажатию кнопки
Вот класс где находятся данные и кнопка &lt;content class=&quot;content&quot;&gt; &lt;div class=&quot;calc&quot; name=&quot;calc&quot;&gt; ...

Как запустить скрипт по нажатию кнопки?
Здравствуйте, я новичек в django и нужна помощь желательно с примером есть код таймера который отсчитывает время и останавливается ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru