Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

PHP & Javascript & HTML5 - Uploading multiple files

From 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 03:50.
369 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×