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>

justsomeguy · November 28, 2016

First, you need to match the case for the IDs in your element and then the selector in Javascript.

For files being uploaded to PHP, in order to populate the $_FILES array the form's enctype needs to be set to "multipart/form-data".

Are you selecting files and then pressing the submit button, or trying to upload files individually through ajax? It looks like you're trying to do both. If you're trying to do a normal form submit then you should put brackets on the input name so that it creates an array in PHP:

name="UploadFiles[]"

boylesg · November 29, 2016

First, you need to match the case for the IDs in your element and then the selector in Javascript.

For files being uploaded to PHP, in order to populate the $_FILES array the form's enctype needs to be set to "multipart/form-data".

Are you selecting files and then pressing the submit button, or trying to upload files individually through ajax? It looks like you're trying to do both. If you're trying to do a normal form submit then you should put brackets on the input name so that it creates an array in PHP:
name="UploadFiles[]"

It is the first time I have tried this so I have no clear idea of what is ajax and what is normal form submit.

Basically I need a fully implemented simple example html file, using either method (form submit example preferred), so I can reverse engineer and understand how it is done. And not have to around with long winded explanations, which is all I have found so far.

Don't have such an example or can point me in the direction of one can you?

boylesg · November 29, 2016

I am following this example: http://blog.teamtreehouse.com/uploading-files-ajax

Great! it is fairly simple.

However I tried it and the javascript crashes at the indicated line of javascript.

This is the problem I am having - none of the authors have a complete working examples.

They leave out information that is critical for a newby.

Obviously I have to include something in order to get "new FormData()" to work.

But what? I have no idea at this point!

 			function OnClick()
			{
alert("000000");				
				var FormData = new FormData();
alert("000000");				
				var InputBrowseFiles = document.getElementById("BrowseFiles")
				var File;
				var arrayFilenames = fileSelect.files;

alert("1111");				
				// Loop through each of the selected files.
				for (var nI = 0; nI < files.length; nI++) 
				{
  					File = InputBrowseFiles [nI];

  					// Check the file type.
  					if (File .type.match("*.htm") || File .type.match("*.txt") || File .type.match("*.php"))
  					{
						// Add the file to the request.
						formData.append('contents[]', File, File.name);
  					}
  					else
  					{
    					continue;
  					}
  				}
  				// Set up the request.
				httpReq = new XMLHttpRequest();
alert("2222");				
				
				// Open the connection.
				httpReq .open('POST', 'upload.php', true);
alert("3333");				
				
				// Set up a handler for when the request finishes.
				httpReq .onload = OnReqFinish;
alert("4444");				
				
				// Send the Data.
				httpReq .send(formData);
alert("5555");				
			}

justsomeguy · November 29, 2016

FormData is native, you don't have to include anything. The problem is that you've used the exact same identifier for the variable name:

var FormData = new FormData();

That's a problem. In the example on his page he used a lowercase f, and since Javascript is case-sensitive that's a different identifier.

There's a simple upload example here, which does not use any Javascript or ajax:

http://www.w3schools.com/php/php_file_upload.asp

The PHP code for that isn't the best (the error checking isn't complete), but that's a simple example.

Sign In

Web page to upload a text file to a web server

Recommended Posts

boylesg

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

boylesg

Link to comment

Share on other sites

boylesg

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity