Click here to Skip to main content
11,411,494 members (63,968 online)
Click here to Skip to main content

JavaScript/PHP - Multiple File Upload

, 15 Jul 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
Option to add n number of file input controls to upload multiple files.


This snippet allows users to add multiple files to be uploaded. By default, only one file upload control is visible. Upon clicking the "+" icon, more controls are added.

Screenshot - default.jpg

Default form

Screenshot - more.jpg

More file controls added


Very often to allow multiple file uploads, an unnecessary number of file upload controls are preloaded in forms. This code is an example of how to keep the form clean without losing the important features.

Using the Code

This code snippet is developed with PHP and needs an Apache webserver to run. The "uploads" directory needs file read-write permission. To use it in an application, you will need to add a database interface to store the uploaded information. It is a single file that has both the form and its handler.

The script has two functions: uploadForm and upload. uploadForm displays the form and upload does the form handling.


The above is an example for new programmers on how to deine a form and its handling in the same script.

<tr class="txt">
   <td valign="top">
    <div id="dvFile">
     <input type="file" name="item_file[]">
   <td valign="top">
    <a href="javascript:_add_more();" title="Add more">
     <img src="plus_icon.gif" border="0">

The hyperlink to the icon invokes the JavaScript function _add_more, which adds more control to the form. I have used the div to identify a block of the form and populate more controls in this block.

function _add_more() {
  var txt = "<br><input type=\"file\" name=\"item_file[]\">";
  document.getElementById("dvFile").innerHTML += txt;

The JavaScript function adds more controls as required.

if(count($_FILES["item_file"]['name'])>0) { //check if any file uploaded
  $GLOBALS['msg'] = ""; //initiate the global message
  for($j=0; $j < count($_FILES["item_file"]['name']); $j++) { 
  //loop the uploaded file array
   $filen = $_FILES["item_file"]['name']["$j"]; //file name
   $path = 'uploads/'.$filen; //generate the destination path
   if(move_uploaded_file($_FILES["item_file"]['tmp_name']["$j"],$path)) {
   //upload the file
    $GLOBALS['msg'] .= "File# ".($j+1)." ($filen) uploaded successfully<br>";
    //Success message
 else {
  $GLOBALS['msg'] = "No files found to upload"; //No file upload message 

The uploaded file handler function checks for uploaded files, and if found, stores them in the web server.

Future Enhancement

In the code, if the user chooses a file and then adds more controls, the previous file information is not stored and is lost. I need to add a feature to store the previously chosen file.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Anisur RM
Web Developer
India India
I am a web-application developer and like to play around with different web technologies for fun. I already dug some ground in JavaScript, PHP, Java, MySQL, Apache and Linux and now like to dig some in C#. I will try to share some of my experience with you, which you may or may not like. Please advice suggestion to improve them.

Comments and Discussions

GeneralMy vote of 5 PinmemberMember 112025813-Nov-14 20:39 
Questionjquery datepicker not working in add more input fields of name="date[]" PinmemberMember 112025813-Nov-14 4:05 
QuestionNeed help in php PinmemberAmit yadav4-Apr-14 2:04 
QuestionFiles are getting uploaded in localhost(local server) but not on the remote server? PinmemberMember 1054036221-Jan-14 20:50 
QuestionDear sir i seen ur code muttiple upload so nice code Pinmembertabrez123459-Jan-14 10:58 
QuestionSave name to database Pinmemberkfaskfjas10-Feb-13 0:56 
GeneralMy vote of 1 PinmemberArumuga Naninar10-Dec-12 22:44 
QuestionGet Undefined index: pgaction when first time form load [modified] Pinmemberniravbhavsar31-Oct-12 20:57 
hi get the error of Undefined index: "pgactionn" when i load first time this form.
rest of functionality work well.
please help me me to solve this error.

modified 1-Nov-12 2:09am.

QuestionUploaded files not going into directory (uploads/) Pinmembergdmoland16-Oct-12 8:26 
QuestionMultiple Upload File PinmemberDr3am3rz17-Jun-12 18:03 
NewsPHP PinmemberRoza Can17-May-12 9:38 
Questioncan i use this script without js Pinmemberkmkmahesh21-Feb-12 22:18 
AnswerRe: can i use this script without js PinmemberAnisur RM28-Feb-12 19:25 
Questionsend attached to email PinmemberMember 844554530-Nov-11 21:07 
AnswerRe: send attached to email PinmemberAnisur RM1-Dec-11 2:38 
GeneralRe: send attached to email PinmemberMember 84455451-Dec-11 15:10 
Questionhow can i add more field and save to database PinmemberFemi Orogun19-Oct-11 5:25 
AnswerRe: how can i add more field and save to database PinmemberAnisur RM1-Dec-11 2:43 
Questionupload images only PinmemberMember 811675927-Jul-11 7:22 
AnswerRe: upload images only PinmemberAnisur RM1-Dec-11 2:46 
GeneralMy vote of 4 PinmemberJohn Ortiz19-Jun-11 3:15 
Generalthank you PinmemberMohamed7IBrahim22-Nov-10 8:16 
GeneralMy vote of 2 PinmemberR o n n y26-Apr-10 0:19 
QuestionClears selections when adding additional fields PinmemberShawn Poquette9-Feb-09 20:10 
AnswerRe: Clears selections when adding additional fields Pinmemberpetershaman13-Feb-09 4:21 
GeneralRe: Clears selections when adding additional fields PinmemberThomasGatt11-Apr-09 1:18 
AnswerRe: Clears selections when adding additional fields Pinmembermpiper2-May-09 12:40 
AnswerRe: Clears selections when adding additional fields PinmemberCattani18-Apr-09 8:57 
QuestionRe: Clears selections when adding additional fields Pinmembermpiper2-May-09 12:49 
AnswerRe: Clears selections when adding additional fields Pinmembertruonglq11-Jun-09 3:42 
GeneralRe: Clears selections when adding additional fields Pinmemberold*vine3-Aug-09 14:51 
GeneralRe: Clears selections when adding additional fields Pinmembertruonglq17-Aug-09 1:17 
Questionwhat if the file uploaded has same file name? Pinmemberarriojb8-Feb-09 6:07 
AnswerRe: what if the file uploaded has same file name? PinmemberAmgedOsman28-Aug-10 23:38 
GeneralThanks Pinmemberthebirdman198412-Dec-08 4:13 
GeneralRe: Thanks Pinmemberold*vine3-Aug-09 15:05 
Questionproblem with firefox? Pinmemberarelanz29-Apr-08 17:16 
AnswerRe: problem with firefox? Pinmemberc0ward19-Jun-08 18:31 
GeneralRe: problem with firefox? Pinmemberarelanz22-Jun-08 15:34 
GeneralRe: problem with firefox? Pinmemberc0ward22-Jun-08 15:50 
GeneralGood One PinmemberVishu Gurav16-Jul-07 6:21 
GeneralASP.NET?! PinmemberAdam Tibi16-Jul-07 6:01 
GeneralRe: ASP.NET?! Pinmembershirley_tzeling23-Jul-07 15:52 
QuestionHow about this? PinmemberVasudevan Deepak Kumar15-Jul-07 22:25 
GeneralExcellent!!! Pinmemberabhijithere15-Jul-07 22:08 
GeneralCool... PinmemberSujoy G15-Jul-07 21:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150414.5 | Last Updated 16 Jul 2007
Article Copyright 2007 by Anisur RM
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid