Web page to upload a text file to a web server

boylesg · November 28, 2016

How do you do this folks?

I have been trying to follow some examples but all I seem to get in $_POST is the name of the first selected file.

$_FILES is empty.

This is my code thus far:

<?php 
		header('Content-Type: text/html; charset=utf8');
		session_start();
?>
<!DOCTYPE html>
<html>

	<head>
	
	<meta charset="UTF-8">
	
	<title>File(s) size</title>
	
		<script>
	
			function UpdateList() 
			{
				var fBytes = 0;
		      	var InputUploadFiles = document.getElementById("UploadFiles").files;
		      	var nFiles = InputUploadFiles.length;
		      	var InputFileList = document.getElementById("ListFiles");
		      	var strFilename = "";
		      	var option = null;
		      	var fFileSize = 0;
		      	var InputLabelTotalBytes = document.getElementById("LabelTotalBytes");
		      	
		  		for (var nFileId = 0; nFileId < nFiles; nFileId++)
		  		{
		  			option = document.createElement("option");
		  			fFileSize = InputUploadFiles[nFileId].size / 1024;
		  			option.text = InputUploadFiles[nFileId].name + " (" + fFileSize.toFixed(2) + " kBytes)";
		  			InputFileList.add(option);
		    		fBytes += InputUploadFiles[nFileId].size;
		  		}
		  		fBytes /= 1024;
		  		InputLabelTotalBytes.innerHTML = fBytes.toFixed(2);
			}
			
			function UploadFile(file)
			{
		    	var url = 'server/index.php';
		    	var xhr = new XMLHttpRequest();
		    	var fd = new FormData();
	
		    	xhr.open("POST", url, true);
		    	xhr.onreadystatechange = function() 
		    	{
	
		        	if (xhr.readyState == 4 && xhr.status == 200) 
		        	{
		            	// Every thing ok, file uploaded
		            	console.log(xhr.responseText); // handle response.
		        	}
		    	}
		    	fd.append("upload_file", file);
			    xhr.send(fd);
	
			}
			
			function UploadFiles()
			{
			    var files = this.files;
		
			    for var nI = 0; nI < files.length; nI++)
			    {
			        UploadFile(this.files[nI]); // call the function to upload the file
				}
			}
			
			var uploadfiles = document.querySelector('#uploadfiles');
			uploadfiles.addEventListener('change', UploadFiles, false);
	
			
		</script>
	
	</head>

	<body onload="updateSize();">
				
		<form name="FileUploadForm" target="upload.php" method="POST">
			
			<p>
			<input id="UploadFiles" type="file" name="UploadFiles" onchange="UpdateList();" multiple size="10"> </p>
			<p><select name="ListFiles" id="ListFiles" size="10" style="width: 224px">
			<option></option>
			</select></p>
			<p><label id="LabelTotalBytes">0</label> kBytes in total to upload...</p>
			
			<p><input type="submit" value="Upload files"></p>
		</form>
		<?php
			echo "<pre>";
			print_r($_FILES);
			print_r($_POST);
			echo "</pre>";
		?>
	</body>
</html>

Sign In

Web page to upload a text file to a web server

Recommended Posts

boylesg

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity