Прогресс бар не загружает процесс отправки изображение в БД

Question

Всем доброго времени суток, решил попробовать реализовать прогресс бар когда идет отправка изображение в БД, вроде бы бар сам отображается а полоска не заполняется. Пытаюсь понять в чем причина то ли ошибка в ajax не так сделал запрос или в чем то еще. Для интереса решил глянуть что происходит при отправке файла и увидел 404 ошибку то пытаюсь понять как она возникает. Буду благодарен за любой совет

Код:

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Load page</title>
    <link rel="stylesheet" href="./Css/Loadpage.css">
    <script src="./Jquery/jquery-3.4.1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<div class="new-product">

    <form  method="post"  id="progress_form" enctype="multipart/form-data">


        <div class="form-group">
            <label for="image">Image</label>
            <input type="file" name="image" id="choose-file" accept="image/png,image/jpeg,image/tiff">
            <span id="error"></span>
        </div>
        <br>
        <input type="submit" class="new-button" id="save" name="save" value="Save">

    </form>
    <div class="form-group" id="process" style="display: none;">
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">

            </div>
        </div>
    </div>
</div>
    <span id="success_message"></span>

    


    <div id="big-card">
        <?php foreach ($products as $product) {?>

            <div class="card">
                <img src="Uploads/<?=$product['image']?>" height="300px" width="300px" class="card-img-top" alt="...">

            </div>

        <?php }?>
    </div>



<script>

    $(document).ready(function (){
        $('#progress_form').on('submit', function (event){
            event.preventDefault();
                $.ajax({
                    url:"new_image.php",
                    method:"POST",
                    data: $(this).serialize(),
                    dataType:"json",
                    contentType:false,
                    cache:false,
                    processData:false,
                    beforeSend: function ()
                    {
                        $('#save').attr('disabled', 'disabled');
                        $('#process').css('display', 'block');

                    },
                    success: function (data)
                    {
                        let percentage = 0;

                        let timer = setInterval(function () {
                            percentage = percentage + 20;
                            progress_bar_process(percentage, timer, data);
                        }, 1000);
                    }
                })

        });

        function progress_bar_process(percentage, timer, data)
        {
            $('.progress-bar').css('width', percentage + '%');
            if (percentage > 100)
            {
                clearInterval(timer);
                $('#progress_form')[0].reset();
                $('#process').css('display', 'none');
                $('.progress-bar').css('width', '0%');
                $('#save').attr('disabled', false);
                $('#success_message').html(data);
                setTimeout(function (){
                    $('#success_message').html('');
                },5000);
            }
        }

    });

</script>


<script src="./JS/functions.js"></script>
</body>
</html>

Код new_image.php:

<?php
require_once '../DB_connect/db_connection.php';


move_uploaded_file($_FILES['image']['tmp_name'],'../Uploads/' . $_FILES['image']['name']);



    $query = 'INSERT INTO table_images (image) VALUES(:image)';
    $product = $pdo->prepare($query);
    $product->execute([
        'image' => $_FILES['image']['name'],
    ]);


    header('location:../index.php');

Answer 1

404 Not Found - стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу.

Если по-русски, у вас задан неправильный путь до файла new_image.php. Нужно задать корректный путь в url:"new_image.php",

БЛОГ НА HUSL

Прогресс бар не загружает процесс отправки изображение в БД

Ответы (1 шт):