Всем доброго времени суток, решил попробовать реализовать прогресс бар когда идет отправка изображение в БД, вроде бы бар сам отображается а полоска не заполняется. Пытаюсь понять в чем причина то ли ошибка в 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');
/user/testобратиться к контроллеру user и методу test. А у вас не знаю. Возможно достаточно задать путь просто относительно файла js. Либо написатьurl: "/Test_task_load_picture/controllers/new_image.php". Так что это уже вам надо посмотреть. Но проблема именно с путём – Алексей Шиманский Jan 14 '21 at 17:08