Korilakkuma/ajax-file-uploader.html

## ajax-file-uploader.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax File Uploader</title>
<style type="text/css">

    * {
        margin:0px;
        padding:0px;
    }

    body {
        font-family:Helvetica, Arial, sans-serif;
        font-size:16px;
        line-height:1.5;
        min-width:320px;
    }

    section {
        margin:0rem auto;
        width:960px;
        /*width:95%;*/
    }

    h1 {
        margin:2rem 0rem 2rem 1rem;
        font-size:3rem;
        font-weight:lighter;
        color:#666;
    }

    ul li {
        list-style:none;
        margin:0.75rem 0px;
    }

    #response ul {
        margin-left:1rem;
    }

    #response ul li {
        list-style:circle;
    }

    [type="text"] {
        padding:0.5rem;
        width:12rem;
        font-size:1rem;
        color:#666;
    }

    [type="text"]:focus {
        outline:none;

        -webkit-box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
           -moz-box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
                box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
    }

    [type="file"] {
        cursor:pointer;
    }

    [type="file"]:focus {
        outline:none;
    }

    button {
        cursor:pointer;
        outline:none;
        border:none;
        padding:0.5rem 0rem;
        width:212px;
        font-size:1rem;
        color:#FFF;
        background-color:#CCC;

        -webkit-transition:background-color 1s ease 0s;
           -moz-transition:background-color 1s ease 0s;
             -o-transition:background-color 1s ease 0s;
                transition:background-color 1s ease 0s;
    }

    button:hover  {
        background-color:#999;
    }

    button:active {
        -webkit-box-shadow:0px 2px 1px 2px rgba(0, 0, 0, 0.3) inset;
           -moz-box-shadow:0px 2px 1px 2px rgba(0, 0, 0, 0.3) inset;
                box-shadow:0px 2px 1px 2px rgba(0, 0, 0, 0.3) inset;
    }

    progress {
        margin:1rem 0rem;
        width:212px;
    }

</style>
<script type="text/javascript">
<!--
(function() {

    document.addEventListener('DOMContentLoaded', function() {

        var file = null;

        document.querySelector('[type="file"]').addEventListener('change', function(event) {
            file = event.target.files[0];
        }, false);

        document.querySelector('form').addEventListener('submit', function(event) {
            // for Ajax
            event.preventDefault();

            var formData = new FormData(this);

            // formData.append('file', file);

            var xhr = new XMLHttpRequest();

            xhr.responseType = 'text';

            xhr.upload.onprogress = function(event) {
                if (event.lengthComputable && (event.total > 0)) {
                    var rate = Math.floor((event.loaded / event.total) * 100);
                    document.querySelector('progress').value = rate;
                }
            };

            xhr.onload = function(event) {
                var response = JSON.parse(xhr.response);

                var ul = document.createElement('ul');

                for (var key in response) {
                    var li   = document.createElement('li');
                    var text = document.createTextNode(key + ' => ' + response[key]);

                    li.appendChild(text);
                    ul.appendChild(li);
                }

                document.querySelector('#response').innerHTML = '';
                document.querySelector('#response').appendChild(ul);
            };

            xhr.open('POST', this.action, true);

            xhr.send(formData);
        }, false);

    }, true);
})();
//-->
</script>
</head>

<body>
    <section>
        <h1>Ajax File Uploader</h1>
        <form action="../php/ajax-file-uploader.php" method="post" enctype="multipart/form-data">
            <ul>
                <li><input type="text" name="text" placeholder="Type text" /></li>
                <li><input type="hidden" name="MAX_FILE_SIZE" value="2000000" /></li>
                <li><input type="file" name="file" /></li>
            </ul>
            <button type="submit">Upload</button>
        </form>
        <progress value="0" max="100"></progress>
        <p id="response"></p>
    </section>
</body>
</html>

## ajax-file-uploader.php
<?php

$results = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!empty($_POST['text'])) {
        $results['text'] = htmlspecialchars($_POST['text'], ENT_QUOTES, 'UTF-8', false);
    }

    if (!empty($_FILES['file'])) {
        foreach ($_FILES['file'] as $key => $value) {
            $results[$key] = htmlspecialchars($value, ENT_QUOTES, 'UTF-8', false);
        }
    }
}

header('Content-Type: application/json; charset=UTF-8');
echo json_encode($results);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Ajax File Uploader</title>
	<style type="text/css">

	* {
	margin:0px;
	padding:0px;
	}

	body {
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	line-height:1.5;
	min-width:320px;
	}

	section {
	margin:0rem auto;
	width:960px;
	/width:95%;/
	}

	h1 {
	margin:2rem 0rem 2rem 1rem;
	font-size:3rem;
	font-weight:lighter;
	color:#666;
	}

	ul li {
	list-style:none;
	margin:0.75rem 0px;
	}

	#response ul {
	margin-left:1rem;
	}

	#response ul li {
	list-style:circle;
	}

	[type="text"] {
	padding:0.5rem;
	width:12rem;
	font-size:1rem;
	color:#666;
	}

	[type="text"]:focus {
	outline:none;

	-webkit-box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
	box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
	}

	[type="file"] {
	cursor:pointer;
	}

	[type="file"]:focus {
	outline:none;
	}

	button {
	cursor:pointer;
	outline:none;
	border:none;
	padding:0.5rem 0rem;
	width:212px;
	font-size:1rem;
	color:#FFF;
	background-color:#CCC;

	-webkit-transition:background-color 1s ease 0s;
	-moz-transition:background-color 1s ease 0s;
	-o-transition:background-color 1s ease 0s;
	transition:background-color 1s ease 0s;
	}

	button:hover {
	background-color:#999;
	}

	button:active {
	-webkit-box-shadow:0px 2px 1px 2px rgba(0, 0, 0, 0.3) inset;
	-moz-box-shadow:0px 2px 1px 2px rgba(0, 0, 0, 0.3) inset;
	box-shadow:0px 2px 1px 2px rgba(0, 0, 0, 0.3) inset;
	}

	progress {
	margin:1rem 0rem;
	width:212px;
	}

	</style>
	<script type="text/javascript">
	<!--
	(function() {

	document.addEventListener('DOMContentLoaded', function() {

	var file = null;

	document.querySelector('[type="file"]').addEventListener('change', function(event) {
	file = event.target.files[0];
	}, false);

	document.querySelector('form').addEventListener('submit', function(event) {
	// for Ajax
	event.preventDefault();

	var formData = new FormData(this);

	// formData.append('file', file);

	var xhr = new XMLHttpRequest();

	xhr.responseType = 'text';

	xhr.upload.onprogress = function(event) {
	if (event.lengthComputable && (event.total > 0)) {
	var rate = Math.floor((event.loaded / event.total) * 100);
	document.querySelector('progress').value = rate;
	}
	};

	xhr.onload = function(event) {
	var response = JSON.parse(xhr.response);

	var ul = document.createElement('ul');

	for (var key in response) {
	var li = document.createElement('li');
	var text = document.createTextNode(key + ' => ' + response[key]);

	li.appendChild(text);
	ul.appendChild(li);
	}

	document.querySelector('#response').innerHTML = '';
	document.querySelector('#response').appendChild(ul);
	};

	xhr.open('POST', this.action, true);

	xhr.send(formData);
	}, false);

	}, true);
	})();
	//-->
	</script>
	</head>

	<body>
	<section>
	<h1>Ajax File Uploader</h1>
	<form action="../php/ajax-file-uploader.php" method="post" enctype="multipart/form-data">
	<ul>
	<li><input type="text" name="text" placeholder="Type text" /></li>
	<li><input type="hidden" name="MAX_FILE_SIZE" value="2000000" /></li>
	<li><input type="file" name="file" /></li>
	</ul>
	<button type="submit">Upload</button>
	</form>
	<progress value="0" max="100"></progress>
	<p id="response"></p>
	</section>
	</body>
	</html>
	<?php

	$results = [];

	if ($_SERVER['REQUEST_METHOD'] === 'POST') {
	if (!empty($_POST['text'])) {
	$results['text'] = htmlspecialchars($_POST['text'], ENT_QUOTES, 'UTF-8', false);
	}

	if (!empty($_FILES['file'])) {
	foreach ($_FILES['file'] as $key => $value) {
	$results[$key] = htmlspecialchars($value, ENT_QUOTES, 'UTF-8', false);
	}
	}
	}

	header('Content-Type: application/json; charset=UTF-8');
	echo json_encode($results);