Я новичок в программировании, поэтому мне нужна помощь. Я использую bootstrap и ajax для создания и прогресс-бар для загрузки файла на сервер, но форма не работает при нажатии кнопки.когда я нажимаю кнопку, ничего не происходит. Я изменяю кнопку на тип ввода = "sumbit", но снова не работает
<!DOCTYPE html>
<?php
require_once 'DB_Functions.php';
$db = new DB_Functions();
?>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<script src="ckeditor/ckeditor.js"></script>
<title>
پنل مدیریت
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'name='viewport'/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- Markazi Text font include just for persian demo purpose, don't include it in your project -->
<link href="https://fonts.googleapis.com/css?family=Cairo&subset=arabic" rel="stylesheet">
<!-- CSS Files -->
<link href="assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet"/>
<link href="assets/css/material-dashboard-rtl.css?v=1.1" rel="stylesheet"/>
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="assets/demo/demo.css" rel="stylesheet"/>
<!-- Style Just for persian demo purpose, don't include it in your project -->
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4 {
font-family: "Cairo";
}
</style>
</head>
<body class="">
<div class="wrapper ">
<div class="sidebar" data-color="purple" data-background-color="white" data-image="assets/img/sidebar-1.jpg">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
مدیریت محتوا
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item ">
<a class="nav-link" href="./category.php">
<i class="material-icons">bubble_chart</i>
<p>دسته بندی</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./map.html">
<i class="material-icons">location_ons</i>
<p>نقشه</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<div class="content">
<div class="container-fluid">
<form id="uploadForm" action="uploadajax.php" method="post">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">عنوان را بنویسید</label>
<input type="text" class="form-control" name="title_video" required>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>توضیحات فیلم</label>
<div class="form-group">
<label class="bmd-label-floating">توضیحات در مورد فیلم را در این کادر</label>
<textarea class="form-control" rows="5" name="content_video"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="custom-file">
<input type="file" class="custom-file-input" name="userImage" id="userImage"
required>
<label class="custom-file-label border-primary" for="inputGroupFile04">فیلم را
انتخاب کنید</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary" type="submit" id="btnSubmit" value="Submit">
آپلود
</button>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success" id="progress-bar" style="width: 2%">0%</div>
</div>
<br>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
<script>
$(document).ready(function () {
$('#uploadForm').submit(function (e) {
if ($('#userImage').val()) {
e.preventDefault();
$(this).ajaxSubmit({
target: '#targetLayer',
beforeSubmit: function () {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total, percentComplete) {
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' + percentComplete + ' %</div>')
},
success: function () {
},
resetForm: true
});
// return false;
}
});
});
</script>
<script type="application/javascript">
$('input[type="file"]').change(function (e) {
var fileName = e.target.files[0].name;
$('.custom-file-label').html(fileName);
});
</script>
<!-- Core JS Files -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
<script src="assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist JS -->
<script src="assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="assets/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="assets/demo/demo.js"></script>
<script>
$(document).ready(function () {
// Javascript method's body can be found in assets/js/demos.js
md.initDashboardPageCharts();
});
</script>
</body>
</html>
uploadajax файл для загрузки
<?php
if(!empty($_FILES)) {
$dir_base = "uploadvideo/";
//filter extentions
$fileExt = explode('.', $_FILES['userImage']['name']);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('gif','jpg','png','svg');
if (in_array($fileActualExt, $allowed)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
if(move_uploaded_file($_FILES['userImage']['tmp_name'],$dir_base.$_FILES['userImage']['name'])) {
// return path
echo '<img src="'.$dir_base.$_FILES['userImage']['name'].'" width="100%" />';
}
}
} else {
echo '<span style="color:red">You cannot upload files of this type!</span>';
}
}
?>
как решитьэто проблема формы для работы и загрузки файла?