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>
Step 2: Implement Java script to upload file.
<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>
Step 3: Create Uploadvideo.php to store file in folder.
<?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); } $host = "localhost"; $username = "root"; $password = ""; $dbname = "uploaded_vedios"; $result_array = array(); /* Create connection */ $conn = new mysqli($host, $username, $password, $dbname); /* Check connection */ if ($conn->connect_error) { die("Connection to database failed: " . $conn->connect_error); } $sql = "INSERT INTO `videos`( `name`)VALUES ('$filename')"; if (mysqli_query($conn, $sql)) { echo 'success'; } else { echo 'failed to insert data'; } mysqli_close($conn); } echo "<h2 class='alert'>Uploaded</h2>"; if ($errors) print_r($errors); } }
<!DOCTYPE html> <html> <head> <title>How To Upload Videos To Database Using PHP And JavaScript</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">How To Upload Videos To Database Using PHP And JavaScript</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>