Page History

...

Code Block

language	xml
title	form.php

<!-- multiple file uploading example by Chun Kang -->
<html>
	<head>
		<title>PHP upload file demo</title>
	</head>
	<body>
		<form method="post" enctype="multipart/form-data" name="formUploadFile" action="submit_upload.php">		
			<label>Select files to upload:</label>
			<input type="file" id="files" name="files[]" multiple="multiple" />
			<input type="submit" value="Chun Kang" name="whoami"/>
		</form>		
	</body>
</html>

...

Code Block

language	js
title	form_ajax.php

<!-- multiple file uploading example by Chun Kang -->
<html>
<head>
	<title>PHP upload file demo</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function _(el)
{
    return document.getElementById(el);
}

function completeCTHandler(event){
	_("upload_info").innerHTML = event.target.responseText;
}

function uploadFiles()
{
	_("upload_info").innerHTML = "Uploading....<br><br>";

	var formdata = new FormData();
	formdata.append("whoami", "Chun Kang");
	total_files = _("files").files.length;
	for( var i=0; i<total_files; i++) formdata.append("files[]", _("files").files[i]);

	var ajax = new XMLHttpRequest();
	ajax.addEventListener("load", completeCTHandler, false);
	ajax.open("POST", "submit_upload.php");
	ajax.send(formdata);
}
</script>

<body>
<form method="post" enctype="multipart/form-data" name="formUploadFile">
	<label>Select files to upload:</label>
	<input type="file" id="files" name="files[]" multiple="multiple" />
	<input type="button" value="Upload File" onClick="uploadFiles()"/>
</form>
<div id="upload_info"></div>
</body>
</html>

...

Code Block

language	js
title	multi_file_uploading_form.php

<!-- multiple file uploading example by Chun Kang -->
<html>
<head>
	<title>PHP upload file demo</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function _(el)
{
    return document.getElementById(el);
}

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

function completeCTHandler(event)
{
	_("upload_info").innerHTML = event.target.responseText;
}

function progressCTHandler(event)
{
	if (event.lengthComputable)
	{
		var percentage = Math.round(event.loaded/event.total*100);
		_("upload_info").innerHTML = formatNumber(event.loaded) + "/" + formatNumber(event.total) + " bytes uploaded (" + percentage.toString() + "%)<br>"
			+  "<progress id=\"progressBar\" value=\"" + percentage.toString() + "\" max=\"100\"></progress>";
	}
}

function uploadFiles()
{
	_("upload_form").style.display = "none";
	_("upload_info").innerHTML = "Uploading....<br><br>";

	var formdata = new FormData();
	formdata.append("whoami", "CK");
	total_files = _("files").files.length;
	for( var i=0; i<total_files; i++) formdata.append("files[]", _("files").files[i]);

	var ajax = new XMLHttpRequest();
	ajax.addEventListener("load", completeCTHandler, false);
	ajax.upload.addEventListener("progress", progressCTHandler, false);
	ajax.open("POST", "submit_upload.php");
	ajax.send(formdata);
}
</script>
<body>
<div id="upload_form">
<form method="post" enctype="multipart/form-data" name="formUploadFile">
	<label>Select files to upload:</label>
	<input type="file" id="files" name="files[]" multiple="multiple" />
	<input type="button" value="Upload File" onClick="uploadFiles()"/>
</form>
</div>
<div id="upload_info"></div>
</body>
</html>

...

Space shortcuts

Page tree

Versions Compared

Old Version 14

New Version Current

Key