Step 1:Create index.html and implement below code in it.
<h2>Upload Videos</h2>
<form method="post" enctype="multipart/form-data">
<input class="form-control" type="file" name="files[]" multiple/><br><br>
<input class="btn btn-success" type="submit" value="Upload File" name="submit"/>
</form>
<script>
const url = 'uploadvideo.php'
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
e.preventDefault()
const files = document.querySelector('[type=file]').files
const formData = new FormData()
for (let i = 0; i < files.length; i++) {
let file = files[i]
formData.append('files[]', file)
}
fetch(url, {
method: 'POST',
body: formData,
}).then((response) => {
console.log(response)
})
})
</script>
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['files'])) {
$errors = [];
$extensions = ['jpg', 'jpeg', 'png', 'gif'];
$all_files = count($_FILES['files']['tmp_name']);
for ($i=0; $i<count($_FILES['files']['name']); $i++)
{
$filetmp = $_FILES['files']['tmp_name'][$i];
$filename = $_FILES['files']['name'][$i];
$filetype = $_FILES['files']['type'][$i];
$filesize = $_FILES['files']['size'][$i];
$filepath = "uploadedvedios/".$filename;
if (!file_exists('uploadedvedios/')) {
mkdir('uploadedvedios/', 0777, true);
move_uploaded_file($filetmp,$filepath);
}
}
echo "<h2 class='alert'>Uploaded</h2>";
if ($errors) print_r($errors);
}
}
Complete Code For Uploading video using java script
<!DOCTYPE html>
<html>
<head>
<title>How Can I Uploads Videos Using PHP And Java Script</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
body {
background: black;
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h2 id="color" style="color: White">Uploads Videos Using PHP And Java Script</h2>
</div>
<br>
<br>
<div class="well">
<h2>Upload Videos</h2>
<form method="post" enctype="multipart/form-data">
<input class="form-control" type="file" name="files[]" multiple/><br><br>
<input class="btn btn-success" type="submit" value="Upload File" name="submit"/>
</form>
</div>
<script>
const url = 'uploadvideo.php'
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
e.preventDefault()
const files = document.querySelector('[type=file]').files
const formData = new FormData()
for (let i = 0; i < files.length; i++) {
let file = files[i]
formData.append('files[]', file)
}
fetch(url, {
method: 'POST',
body: formData,
}).then((response) => {
console.log(response)
})
})
</script>
</div>
</body>
</html>