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>