Friday, November 24, 2023

Multi Upload Vanilla JS and PHP

1. Form Input Data:

---------------------

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> Multi Upload Vanilla Javascript </title>

    <script>

        function uploadFiles() {

            var formdata = new FormData();

            var file = document.getElementsByName("filegroup")[0].files;

            for (var i = 0; i < file.length; i++) {

                formdata.append("data"+i, file[i]);

            }

                var ajax = new XMLHttpRequest();

                ajax.open("POST", "upload.php");

                ajax.onreadystatechange = function () {

                    if (ajax.readyState == 4 && ajax.status == 200) {

                        var resp = ajax.responseText;

                        console.log(resp);

                    }

                }

                ajax.send(formdata);

        }



    </script>

</head>


<body>


    <form method="post" enctype="multipart/form-data">

        <input type="file" name="filegroup" multiple />

        <input type="button" value="Upload" onclick="uploadFiles()" />

    </form>



</body>


</html>


-----------------------

2. Upload Proses 

-----------------------

<?php


$file = $_FILES;

$jumlah = count($file);

$list_file = array();

for($i=0; $i<$jumlah;$i++){

    $list_file[] = $file['data'.$i]['name'];

    move_uploaded_file($file['data'.$i]['tmp_name'], "upload/".$file['data'.$i]['name']);

    //bisa lansung di input ke DB di dalam Looping ini

}

echo json_encode($list_file);

?>

Set Cookie dan Remove Cookie dengan php vanilla.js

< html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport...