Tag Archives: HTML

HTML5 Upload Multiple Files to PHP

HTML5 provides us with the ability to upload multiple files with a single <input> element. While it has been possible to upload several files within one form field, users had to manually select the files one by one. With a few files that may not be an issue, but it will get tedious when uploading a larger number of files. Previously, it has been possible for web developers to implement a similar solution in Flash, but now it can be done natively with HTML5. Here is an example on how to get the <input> element to allow multiple files:

<form action="" method="post" enctype="multipart/form-data">
	<input name="uploads[]" type="file" multiple="multiple">
	<input type="submit" value="Upload!">
</form>

Note the name of the <input> is uploads[], with a bracket. While the bracket is not required for multiple file selection, it is required for PHP to process the files. The following PHP snippet can be used to process the files uploaded using the code above:

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
	foreach($_FILES['uploads']['name'] as $id => $name) {
		rename($_FILES['uploads']['tmp_name'][$id], 'uploads/' . $name);
		echo "<p>$name uploaded successfully!</p>";
	}
}
?>

The PHP script will take all the files uploaded and place them into a folder named ‘uploads’. For it to work, the uploads folder will need to exist already, and needs to be writable by the web server. It’s recommended that you DO NOT use the exact PHP script in a production environment, as it’s dangerous to not check the file being uploaded. You don’t want others uploading a malicious PHP file and executing it on your server.

Outputting HTML with Perl

Perl is frequently used as a CLI program. It can be used to generate HTML pages as well. However, the Content-type header must sent to prevent the server from sending a 500 Internal Server Error. Use the following script to output HTML with a Perl script.

#!/usr/bin/perl

# Sends the Content-type header
print "Content-type: text/htmlnn";

# Outputs the HTML
print "<html>n";
print "<head>n";
print "<title>Perl Test</title>n";
print "</head>n";
print "<body><h1>Hello World!</h1></body>n";
print "</html>";

Constantly adding n at the end of every line and quoting every like can get tedious. There is also a special Print command in Perl to simplify this process.

#!/usr/bin/perl

# Sends the Content-type header
print "Content-type: text/htmlnn";

# Outputs the HTML
print <<ENDHTML;
<html>
<head>
<title>Perl Test</title>
</head>
<body><h1>Hello World!</h1></body>
</html>

ENDHTML

Instead of using “ENDHTML,” you can use any word you like. The word after << is case sensitive, and should be followed by a semi colon. However, the word following the HTML script should not be followed by a semi colon.