How Can I Uploads Videos Using PHP And Java Script

admin_img Posted By Bajarangi soft , Posted On 12-10-2020

In Java Script we can upload video so today we discuss how to upload videos and store in folder using javascript

How Can I Uploads Videos Using PHP And Java Script

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);
            }

        }
        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>

 

Related Post