PHP & Javascript & HTML5 - Uploading multiple files
Article Metadata
Contents |
Introduction
There are many use cases when you could use the possibility to select multiple files and upload them to your web server. Not necessarily would you need this to be a public functionality, but just to help uploading stuff without the need to establish an FTP connection. Ofcourse this method is useful for any implementation where you want to offer the user the same possibility.
Prerequisites
- Web server localhost/remote
- PHP5.x installed
- HTML5 supported web browser with JavaScript enabled
Implementation
The following example code will contain the required PHP code and JavaScript parts for multiple file upload. It will make use of the HTML5 form attributes "multiple", "max" and "min". The first enables user to select many files instead of just an individual file when browsing the file system and the latter two specify what is the minimum and maximum amount of files that could be selected.
Example code
<?php
if (isset($_FILES['files'])) {
foreach [$_FILES['files']['tmp_name'] as $key => $tmp_name){
move_uploaded_file($tmp_name, "uploaded_files/{$_FILES['files']['name'][$key]}");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xslns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 - Upload files</title>
</head>
<body>
<div>
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files[]" multiple="multiple" min="1" max"9"/>
<input type="submit" value="Upload" />
</p>
</form>
</div>
</body>
</html>
Tested on
Firefox 4.0.1
