×
Namespaces

Variants
Actions

PHP & Javascript & HTML5 - Uploading multiple files

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (20 Jun 2011)
Last edited: hamishwillee (31 Jul 2012)

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

This page was last modified on 31 July 2012, at 06:50.
150 page views in the last 30 days.
×