Javascript: Multiple File Upload

Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.

Moderator: General Moderators

Post Reply
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Javascript: Multiple File Upload

Post by Burrito »

This will allow users to select multiple files and and upload them all at once (or remove them from a select box).

Note: no file-type checking done here (on client side) so add that if you wanna.

just handle the uploadz[] array on the php side as you wish:

you can see a workign model here

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>Multiple File Uploader</title><style>body{background-color:#9eb4b1; font-size:}.gone{display:none;}input, select{font-family:arial; font-size:8.5pt; background-color:#424e51; color:#b3b19b; border: 1px #ffffffsolid;} </style><script>/////////////////////////////////////////////////////// Javascript by Burrito 02/09/2005 //// with a lil' help from TD //// inspired by feyd //// Modify at will, or Al, Or Harry /////////////////////////////////////////////////////// function hasOptions(obj) {if (obj!=null && obj.options!=null){return true;}else{return false;}} function addFi(t,v){var s = document.MyForm.whfilez;if(!hasOptions(s)){var index = 0;}else{var index = s.options.length;}t = t.split("&quote;);t = t?t.length-1];t = t.split("/");t = t?t.length-1]; s.options?index] = new Option(t,v,false,false);document.getElementById(v).style.display = "none";showNext();}function showNext(where){for(i=1;i<13;i++){document.getElementById(i).style.display = "none";}for(i=1;i<13;i++){var d = "a" + i;if(document.getElementById(d).value == ""){ document.getElementById(i).style.display = "inline";break;}}} function remFi(){var s = document.MyForm.whfilez;for(i=(s.options.length-1); i>=0; i--){var o = s.options?i];if (o.selected){var fh = s.options?i].value;document.getElementById(fh).innerHTML = "<input type="file" id="a"+fh+"" name="uploadz?]" size="10"onChange="addFi(this.value,"+fh+")">";s.options?i] = null; }}showNext(); } </script></head> <body><div align="center"><form method="post" enctype="multipart/form-data" name="MyForm"><span id="1"><input type="file" id="a1" name="uploadz?]" size="10"onChange="addFi(this.value,1)"></span><span id="2" class="gone"><input type="file" id="a2" name="uploadz?]" size="10"onChange="addFi(this.value,2)"></span><span id="3" class="gone"><input type="file" id="a3" name="uploadz?]" size="10"onChange="addFi(this.value,3)"></span><span id="4" class="gone"><input type="file" id="a4" name="uploadz?]" size="10"onChange="addFi(this.value,4)"></span><span id="5" class="gone"><input type="file" id="a5" name="uploadz?]" size="10"onChange="addFi(this.value,5)"></span><span id="6" class="gone"><input type="file" id="a6" name="uploadz?]" size="10"onChange="addFi(this.value,6)"></span><span id="7" class="gone"><input type="file" id="a7" name="uploadz?]" size="10"onChange="addFi(this.value,7)"></span><span id="8" class="gone"><input type="file" id="a8" name="uploadz?]" size="10"onChange="addFi(this.value,Cool"></span><span id="9" class="gone"><input type="file" id="a9" name="uploadz?]" size="10"onChange="addFi(this.value,9)"></span><span id="10" class="gone"><input type="file" id="a10" name="uploadz?]" size="10"class="gone" onChange="addFi(this.value,10)"></span><span id="11" class="gone"><input type="file" id="a11" name="uploadz?]" size="10"class="gone" onChange="addFi(this.value,11)"></span><span id="12" class="gone"><input type="file" id="a12" name="uploadz?]" size="10"class="gone" onChange="addFi(this.value,12)"></span><br><select name="whfilez" id="whfilez" multiple="multiple" size="10"><optgroup label="Files To Upload"></optgroup> </select><br><input type="button" value="REM (ALT-D)" onClick="remFi()" accesskey="d"><br><input type="submit" value="Upload These Files (ALT-U)" accesskey="u"><br> </form></div> </body></html>
you can see a workign model here

Burr

d11wtq | Fixed issue with HTML entities (23rd Nov 2005)
Weirdan | Added syntax highlighting (April 15th, 2007)
lehoangngochan
Forum Newbie
Posts: 1
Joined: Sun Apr 15, 2007 6:37 am

Multiple File Upload

Post by lehoangngochan »

Dear Burrito,

How can display these file after upload multiple file are completed?

Lucy
User avatar
jimthunderbird
Forum Contributor
Posts: 147
Joined: Tue Jul 04, 2006 3:59 am
Location: San Francisco, CA

Re: Javascript: Multiple File Upload

Post by jimthunderbird »

Great work! If it can also show an upload progressing bar that will be awesome.
Johnlbuk
Forum Newbie
Posts: 19
Joined: Mon Sep 10, 2007 3:01 pm

Re: Javascript: Multiple File Upload

Post by Johnlbuk »

What is the best way to handle the array to upload the files to a certain folder?
Any help would be great.
Cheers
Post Reply