Click here to Skip to main content
11,644,286 members (67,063 online)
Click here to Skip to main content

Multiple Dynamic File Uploading

, 15 Jul 2008 CPOL 58.5K 1.4K 34
Rate this:
Please Sign up or sign in to vote.
This article is about to upload multiple files using javascript

Introduction

This article is all about to upload multiple files using javascript and Server code(C#/Vb).NET

Background

Many time perhaps you need to upload multiple files to server. And you may adopt an approach of dynamic file upload control's creation through server code OR you may adopt dynamic file upload control's creation using javascript. This article is all about creating file upload control on client side using javascript and getting posted file from server side.

Using the code

First of all you have to create a table/cell where you want to show your file uploading controls.

Like this:

<table width="100" >
    <tr>
            <td id="tdFileInputs" width="100" valign="top">
                </td>
        </tr>
        <tr>
            <td nowrap="nowrap">
                    <img src="images/attach.gif" />
                        <a id="lnkAttch"
                        onmouseover="this.style.textDecoration='underline'"
                        onmouseout="this.style.textDecoration='none'"
                        style="cursor: hand" onclick="AddFileInput()">Attach a file</a>
        </tr>
</table> 

Then you need little javascript for creating file uploading control. For this you must create a table which contain a template like this:

<table style="display: none;">
        <tr height="1">
            <td width="1" height="1">
            </td>
            <td height="1" id="tdFileInputsTemp" width="100" valign="top"
                 style="visibility: hidden;">
                <input id="fileInputTemp" type="file" /><a
                    onmouseover="this.style.textDecoration='underline'"
                    onmouseout="this.style.textDecoration='none'" style="cursor: hand;"
                    id="remove_fileInputTemp"></a></td>
        </tr>
    </table>

You must set "display" property of template table to "none" because you do not want to show it on UI also note that name property of the file input for template is not set. Because if you gave it a name then at server side code it will be in collection of posted files but you do not need it at server side because it does not hold any file at any time

style="display: none;"  

Now it is the turn of writing javascript code for creating file input controls and remove button.

<script language="javascript" type="text/javascript">
        function Load()
        {
        
            document.getElementById("btnSend").style.display="none";
        }
        count  = 0;
        function AddFileInput()
        {
            var tdFileInputsTemp = document.getElementById('tdFileInputsTemp');
            var tdFileInputs = document.getElementById('tdFileInputs');
            var fileInput = tdFileInputsTemp.firstChild;
            var a = tdFileInputsTemp.lastChild;
            // Create a new file input
            var newFileInput = fileInput.cloneNode(false);
            newFileInput.value = null;
            var id = (new Date()).getTime();
            newFileInput.id = id // A unique id
            newFileInput.name = newFileInput.id;
            tdFileInputs.appendChild(newFileInput);
            
            // Create a new a input
            var newa = a.cloneNode(false);
            newa.id = 'remove_' + id; // A unique id
            newa.innerHTML = "Remove<br>";
            newa.onclick = RemoveFileInput;
            tdFileInputs.appendChild(newa);
            var lnkAttch = document.getElementById('lnkAttch');
            count = count + 1;
            if(count>0)
            {
                lnkAttch.innerHTML = "Attach another file";
                document.getElementById("btnSend").style.display="";
            }
            else
            {
                document.getElementById("btnSend").style.display="none";
                lnkAttch.innerHTML = "Attach a file";
            }
        }
        
        function RemoveFileInput(e)
        {
            var Event = e ? e : window.event; 
            var obj = Event.target ? Event.target : window.event.srcElement; 
            var tdFileInputs = document.getElementById('tdFileInputs');
            var a = document.getElementById(obj.id);
            tdFileInputs.removeChild(a);
            var fileInputId = obj.id.replace('remove_','');
            var fileInput = document.getElementById(fileInputId);
            tdFileInputs.removeChild(fileInput);
            var lnkAttch = document.getElementById('lnkAttch');
            count = count - 1;
            if(count>0)
            {
                lnkAttch.innerHTML = "Attach another file";
                document.getElementById("btnSend").style.display="";
            }
            else
            {
                lnkAttch.innerHTML = "Attach a file";
                document.getElementById("btnSend").style.display="none";
            }
        }
        
</script> 

Code is self descriptive, and i do not want to go in details of each function.

You can use this code in any web development language.

After implementing the code if you run the project you will see output like this:

p2.GIF

p3.GIF

Here is the server side code for accessing the posted files. You may save files to server or whatever you want.

lblFiles.Text = "";
        HttpFileCollection files = Request.Files;
        for (int i = 0; i < files.Count; i++)
        {
            HttpPostedFile file = files[i];
            if (file.ContentLength > 0)
            {
                //You can perform uploading here
                lblFiles.Text += "<br>" + String.Format("File : {0} uploaded.",
                    file.FileName);
            }
        }

Points of Interest

This is just a fun for creating rich client applications for best performance and user interaction.

History

Continued...

License

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

Share

About the Author

Khalil Ahmad
Software Developer (Senior) Xavor
Pakistan Pakistan
An experienced and detail-oriented business professional with superior analyzing, design, development and project management skills

You may also be interested in...

Comments and Discussions

 
QuestionFix when using master page Pin
cole64376-May-14 11:44
membercole64376-May-14 11:44 
QuestionSaved Location. Pin
Member 1034595722-Oct-13 20:28
memberMember 1034595722-Oct-13 20:28 
AnswerThanks Its really nice code... worked perfect with two modification Pin
Member 76715279-Jan-12 23:20
memberMember 76715279-Jan-12 23:20 
GeneralRe: Thanks Its really nice code... worked perfect with two modification Pin
ChivoVerde31-May-12 13:58
memberChivoVerde31-May-12 13:58 
QuestionWorks fine in FF but not in IE 8 . Can you please suggest what we are missing? Pin
sumitd29-Sep-09 4:21
membersumitd29-Sep-09 4:21 
GeneralMy vote of 1 Pin
clientzxcvb22-Jun-09 2:15
memberclientzxcvb22-Jun-09 2:15 
GeneralRe: My vote of 1 Pin
Khalil Ahmad22-Jun-09 2:48
memberKhalil Ahmad22-Jun-09 2:48 
GeneralRe: My vote of 1 [modified] Pin
clientzxcvb22-Jun-09 3:19
memberclientzxcvb22-Jun-09 3:19 
GeneralPlease update the article [modified] Pin
clientzxcvb22-Jun-09 1:53
memberclientzxcvb22-Jun-09 1:53 
GeneralIf you got Files.Count = 0 Pin
BlinZaparaSEtimiImenami20-Jun-09 6:01
memberBlinZaparaSEtimiImenami20-Jun-09 6:01 
GeneralRe: If you got Files.Count = 0 Pin
ChivoVerde1-Jun-12 12:32
memberChivoVerde1-Jun-12 12:32 
GeneralPlease Update your Example Pin
tomtom009-Apr-09 0:34
membertomtom009-Apr-09 0:34 
Generalfiles.Count is always zero Pin
SivaGuruNathan198423-Jan-09 18:09
memberSivaGuruNathan198423-Jan-09 18:09 
GeneralRe: files.Count is always zero Pin
Khalil Ahmad24-Jan-09 19:08
memberKhalil Ahmad24-Jan-09 19:08 
GeneralRe: files.Count is always zero Pin
Naresnkumar3-Feb-09 17:12
memberNaresnkumar3-Feb-09 17:12 
GeneralRe: files.Count is always zero Pin
Khalil Ahmad3-Feb-09 20:09
memberKhalil Ahmad3-Feb-09 20:09 
GeneralRe: files.Count is always zero Pin
the_luvphd25-Mar-09 14:00
memberthe_luvphd25-Mar-09 14:00 
GeneralRe: files.Count is always zero Pin
frankencat24-Aug-09 9:51
memberfrankencat24-Aug-09 9:51 
GeneralRe: files.Count is always zero Pin
PrashantMohanBansal4-Feb-10 20:57
memberPrashantMohanBansal4-Feb-10 20:57 
GeneralRe: files.Count is always zero Pin
gigi.mignon23-Jul-10 0:47
membergigi.mignon23-Jul-10 0:47 
GeneralMy vote of 2 Pin
moker16-Jan-09 17:23
membermoker16-Jan-09 17:23 
GeneralServer side code is not executing Pin
ravi.g16-Nov-08 22:57
memberravi.g16-Nov-08 22:57 
GeneralRe: Server side code is not executing Pin
Khalil Ahmad17-Nov-08 7:37
memberKhalil Ahmad17-Nov-08 7:37 
GeneralMultiple Dynamic File Uploading Pin
Member 55658501-Oct-08 3:39
memberMember 55658501-Oct-08 3:39 
GeneralRe: Multiple Dynamic File Uploading Pin
Khalil Ahmad1-Oct-08 3:44
memberKhalil Ahmad1-Oct-08 3:44 
GeneralRe: Multiple Dynamic File Uploading Pin
Naresnkumar3-Feb-09 17:42
memberNaresnkumar3-Feb-09 17:42 
QuestionProblem in Firefox Pin
sunnysetia0915-Jul-08 18:29
membersunnysetia0915-Jul-08 18:29 
AnswerRe: Problem in Firefox Pin
Khalil Ahmad15-Jul-08 20:38
memberKhalil Ahmad15-Jul-08 20:38 
GeneralFacing problems in Mozila firefox(for JavaScript). Pin
satish patel22-Jun-08 20:17
membersatish patel22-Jun-08 20:17 
GeneralRe: Facing problems in Mozila firefox(for JavaScript). Pin
Khalil Ahmad15-Jul-08 20:40
memberKhalil Ahmad15-Jul-08 20:40 
GeneralProblem in Mozilla Pin
Jigs Shah20-May-08 23:27
memberJigs Shah20-May-08 23:27 
GeneralRe: Problem in Mozilla Pin
Khalil Ahmad27-May-08 4:49
memberKhalil Ahmad27-May-08 4:49 
GeneralRe: Problem in Mozilla Pin
Khalil Ahmad15-Jul-08 20:41
memberKhalil Ahmad15-Jul-08 20:41 
Questionhow to use this with vwd2005 and sql? Pin
zakzapakzak2-May-08 1:48
memberzakzapakzak2-May-08 1:48 
AnswerRe: how to use this with vwd2005 and sql? Pin
Khalil Ahmad2-May-08 5:45
memberKhalil Ahmad2-May-08 5:45 

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
Web04 | 2.8.150731.1 | Last Updated 16 Jul 2008
Article Copyright 2008 by Khalil Ahmad
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid