|
1 /** |
|
2 * Convert a single file-input element into a 'multiple' input list |
|
3 * |
|
4 * Usage: |
|
5 * |
|
6 * 1. Create a file input element (no name) |
|
7 * eg. <input type="file" id="first_file_element"> |
|
8 * |
|
9 * 2. Create a DIV for the output to be written to |
|
10 * eg. <div id="files_list"></div> |
|
11 * |
|
12 * 3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files |
|
13 * eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 ); |
|
14 * |
|
15 * 4. Add the first element |
|
16 * eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) ); |
|
17 * |
|
18 * 5. That's it. |
|
19 * |
|
20 * You might (will) want to play around with the addListRow() method to make the output prettier. |
|
21 * |
|
22 * You might also want to change the line |
|
23 * element.name = 'file_' + this.count; |
|
24 * ...to a naming convention that makes more sense to you. |
|
25 * |
|
26 * Licence: |
|
27 * Use this however/wherever you like, just don't blame me if it breaks anything. |
|
28 * |
|
29 * Credit: |
|
30 * If you're nice, you'll leave this bit: |
|
31 * |
|
32 * Class by Stickman -- http://www.the-stickman.com |
|
33 * with thanks to: |
|
34 * [for Safari fixes] |
|
35 * Luis Torrefranca -- http://www.law.pitt.edu |
|
36 * and |
|
37 * Shawn Parker & John Pennypacker -- http://www.fuzzycoconut.com |
|
38 * [for duplicate name bug] |
|
39 * 'neal' |
|
40 */ |
|
41 function MultiSelector( list_target, max ){ |
|
42 |
|
43 // Where to write the list |
|
44 this.list_target = list_target; |
|
45 // How many elements? |
|
46 this.count = 0; |
|
47 // How many elements? |
|
48 this.id = 0; |
|
49 // Is there a maximum? |
|
50 if( max ){this.max = max;} |
|
51 else {this.max = -1;}; |
|
52 |
|
53 /** |
|
54 * Add a new file input element |
|
55 */ |
|
56 this.addElement = function( element ){ |
|
57 |
|
58 // Make sure it's a file input element |
|
59 if( element.tagName == 'INPUT' && element.type == 'file' ){ |
|
60 |
|
61 // Element name -- what number am I? |
|
62 element.name = 'file[]'; //_' + this.id++; |
|
63 element.className = "text"; |
|
64 element.size = "35"; |
|
65 |
|
66 // Add reference to this object |
|
67 element.multi_selector = this; |
|
68 |
|
69 // What to do when a file is selected |
|
70 element.onchange = function(){ |
|
71 |
|
72 /* Set the Types Allowed */ |
|
73 var types_allowed = ".gif, .jpg, .png"; |
|
74 |
|
75 /* Get the form valu and strign length*/ |
|
76 var form_value = element.value; |
|
77 var str_end = form_value.length; |
|
78 |
|
79 /* Find out the filetype of the selected file */ |
|
80 var str_start = ((str_end/1) - 4); |
|
81 var file_type = form_value.substring(str_start, str_end).toLowerCase();; |
|
82 |
|
83 /* Replace Spaces for correct splitting */ |
|
84 var arrFiles = types_allowed.replace(/ /g, ""); |
|
85 arrFiles = arrFiles.split(","); |
|
86 |
|
87 var file_correct = 0; |
|
88 var i_max = arrFiles.length; |
|
89 for(var i = 0; i < i_max; i++) |
|
90 { |
|
91 if(file_type == arrFiles[i]) |
|
92 {var file_correct = 1; break;} |
|
93 } |
|
94 if(file_correct == 0) |
|
95 {alert("Only the following files are allowed in this file input: "+types_allowed);} |
|
96 else |
|
97 { |
|
98 // New file input |
|
99 var new_element = document.createElement( 'input' ); |
|
100 new_element.type = 'file'; |
|
101 |
|
102 // Add new element |
|
103 this.parentNode.insertBefore( new_element, this ); |
|
104 |
|
105 // Apply 'update' to element |
|
106 this.multi_selector.addElement( new_element ); |
|
107 |
|
108 // Update list |
|
109 this.multi_selector.addListRow( this ); |
|
110 |
|
111 // Hide this: we can't use display:none because Safari doesn't like it |
|
112 this.style.position = 'absolute'; |
|
113 this.style.left = '-1000px'; |
|
114 } |
|
115 |
|
116 }; |
|
117 // If we've reached maximum number, disable input element |
|
118 if( this.max != -1 && this.count >= this.max ){ |
|
119 element.disabled = true; |
|
120 alert("You have reached the maximum of "+ this.max +" uploads at a time."); |
|
121 }; |
|
122 |
|
123 // File element counter |
|
124 this.count++; |
|
125 // Most recent element |
|
126 this.current_element = element; |
|
127 |
|
128 } else { |
|
129 // This can only be applied to file input elements! |
|
130 alert( 'Error: not a file input element' ); |
|
131 }; |
|
132 |
|
133 }; |
|
134 |
|
135 /**************************************/ |
|
136 /* Add a new row to the list of files */ |
|
137 /**************************************/ |
|
138 |
|
139 this.addListRow = function( element ){ |
|
140 var file_List = document.getElementById("files_list").innerHTML; |
|
141 if(file_List == "You have not selected any images") |
|
142 {document.getElementById("files_list").innerHTML = "";} |
|
143 |
|
144 // Row div |
|
145 var new_row = document.createElement('div'); |
|
146 new_row.style.padding = "6px;"; |
|
147 new_row.className = "add_image"; |
|
148 |
|
149 var new_row_button = document.createElement( 'a' ); |
|
150 new_row_button.href = "javascript:;"; |
|
151 new_row_button.innerHTML += " Remove" |
|
152 new_row_button.style.top = "-11px" |
|
153 |
|
154 // References |
|
155 new_row.element = element; |
|
156 |
|
157 // Delete function |
|
158 new_row_button.onclick= function(){ |
|
159 |
|
160 // Remove element from form |
|
161 this.parentNode.element.parentNode.removeChild( this.parentNode.element ); |
|
162 // Remove this row from the list |
|
163 this.parentNode.parentNode.removeChild( this.parentNode ); |
|
164 // Decrement counter |
|
165 this.parentNode.element.multi_selector.count--; |
|
166 // Re-enable input element (if it's disabled) |
|
167 this.parentNode.element.multi_selector.current_element.disabled = false; |
|
168 // Appease Safari |
|
169 // without it Safari wants to reload the browser window |
|
170 // which nixes your already queued uploads |
|
171 return false; |
|
172 }; |
|
173 |
|
174 // Set row value |
|
175 // Loop through the full file path and remove all the text up to the actual file name. |
|
176 |
|
177 element_HTML = element.value.toString(); |
|
178 var i_len = element_HTML.length; |
|
179 |
|
180 for(var i = 0; i < i_len; i++) |
|
181 { |
|
182 var element_HTML_findslash = element_HTML.toString().indexOf('\\'); |
|
183 |
|
184 if(element_HTML_findslash == -1) |
|
185 {break} |
|
186 else |
|
187 {element_HTML = element_HTML.substring((element_HTML_findslash+1), i_len);} |
|
188 } |
|
189 |
|
190 new_row.innerHTML = element_HTML+" "; //element.value; |
|
191 |
|
192 // Add button |
|
193 new_row.appendChild( new_row_button ); |
|
194 |
|
195 // Add it to the list |
|
196 this.list_target.appendChild( new_row ); |
|
197 |
|
198 }; |
|
199 |
|
200 }; |