https://www.kssn.net/js/kssn/com/cmm/fms/EgovMultiFile.js?p=260526

1/**
2 * Convert a single file-input element into a 'multiple' input list
3 * Usage:
4 *
5 *   1. Create a file input element (no name)
6 *      eg. <input type="file" id="first_file_element">
7 *
8 *   2. Create a DIV for the output to be written to
9 *      eg. <div id="files_list"></div>
10 *
11 *   3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files
12 *      eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
13 *
14 *   4. Add the first element
15 *      eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) );
16 */
17
18function MultiSelector( list_target, max , file_label, elementName, extensions ){
19
20	// Where to write the list
21	this.list_target = list_target;
22	// How many elements?
23	this.count = 0;
24	// How many elements?
25	this.id = 0;
26
27	this.update_count = 0;
28	// Is there a maximum?
29	if( max ){
30		this.max = max;
31	} else {
32		this.max = -1;
33	};
34	this.file_label = file_label
35
36	if(elementName){
37		this.elementId = elementName;
38		this.elementName = elementName;
39	}else{
40		this.elementName = 'file';
41		this.elementId = 'egovfile';
42	}
43
44	this.current_count = 0;
45
46	/**
47	 * Add a new file input element
48	 */
49//	_base = this;
50	this.addElement = function(element){
51
52		// Make sure it's a file input element
53		if( element.tagName == 'INPUT' && element.type == 'file' ){
54
55			//console.log('check step addElement start');
56
57			// Element name -- what number am I?
58			element.name = this.elementName+'_' + this.id;
59			element.id =  this.elementId+'_' + this.id;
60			element.class = "";
61
62			document.getElementById(this.file_label).setAttribute("for",this.elementId+"_"+this.id);
63			//console.log('file_label>'+element.name);
64
65			this.id++;
66
67			// Add reference to this object
68			element.multi_selector = this;
69
70			// What to do when a file is selected
71			element.onchange = function(){
72
73				if(this.value == "" || this.value == null) return;
74
75				_base = this.multi_selector;
76
77				// 개수 체크
78				var sErrMsg = "첨부파일 갯수는 ["+_base.max+"]이상 첨부할 수 없습니다!";
79				if((_base.update_count > 0 && _base.count > (_base.max-_base.update_count))
80						|| (_base.max > 0  && _base.count > _base.max)){
81					element.value = "";
82					alert(sErrMsg);
83					return;
84				}
85				// 확장자 체크
86				if(extensions != "undefined" && extensions != "" && extensions != null){
87					var extOk = false;
88					var fileExt = this.value.slice(this.value.lastIndexOf(".") + 1).toLowerCase();
89					var extArr = extensions.split(",");
90
91					for(var i in extArr){
92						var ext = extArr[i].replace(/\s/gi, "").toLowerCase();
93						if(fileExt == ext) extOk = true;
94						if(extOk) break;
95					}
96
97					if(!extOk){
98						element.value = "";
99						alert(extensions+"형식의 파일만 첨부할 수 있습니다!");
100						return;
101					}
102				}
103
104				// New file input
105				var new_element = document.createElement( 'input' );
106				new_element.type = 'file';
107
108				// Add new element
109				this.parentNode.insertBefore( new_element, this );
110
111				// Apply 'update' to element
112				this.multi_selector.addElement( new_element );
113
114				// Update list
115				this.multi_selector.addListRowNew( this );
116
117				// Hide this: we can't use display:none because Safari doesn't like it
118				this.style.position = 'absolute';
119				this.style.left = '-1000px';
120				this.style.top = '-1000px';
121				this.style.display = 'none';
122				this.style.visibility = 'hidden';
123				this.style.width = '0';
124				this.style.height = '0';
125				this.style.overflow = 'hidden';
126
127				new_element.onkeypress = function(){
128					return false;
129				};
130
131			};
132			// If we've reached maximum number, disable input element
133			if( this.max != -1 && this.count >= this.max ){
134				//element.disabled = true;
135			};
136
137			// File element counter
138			this.count++;
139			// Most recent element
140			this.current_element = element;
141
142		} else {
143			// This can only be applied to file input elements!
144			alert( 'Error: not a file input element' );
145		};
146	};
147
148	/**
149	 * Add a new row to the list of files
150	 */
151	this.addListRowNew = function( element ){
152
153		// Row div
154		var new_row = document.createElement( 'div' );
155		new_row.className = "file_add";
156
157		// Delete button
158		var new_row_button = document.createElement( 'img' );
159		new_row_button.src = '../../../images/kssn/com/cmm/btn/btn_del.png';
160		new_row_button.className = "cursor";
161		new_row_button.style.margin = "0 0 0 0";
162		new_row_button.style.padding = "0 0 0 0";

163		//new_row_button.style.top = '3px';
164
165		// References
166		new_row.element = element;
167
168		// Delete function
169		new_row_button.onclick= function(){
170
171			// Remove element from form
172			this.parentNode.element.parentNode.removeChild( this.parentNode.element );
173
174			// Remove this row from the list
175			this.parentNode.parentNode.removeChild( this.parentNode );
176
177			// Decrement counter
178			this.parentNode.element.multi_selector.count--;
179
180			// Re-enable input element (if it's disabled)
181			this.parentNode.element.multi_selector.current_element.disabled = false;
182
183			//    which nixes your already queued uploads
184			return false;
185		};
186		// Set row value
187		//new_row.innerHTML = element.value;
188		new_row.innerHTML = "<input type='text' class='input2' readonly='readonly' style='width:50%; ' value='"+element.value+" ' style='padding:0 0 0 0;margin:0 0 0 0;'>";
189
190		// Add button
191		new_row.appendChild( new_row_button );
192
193		// Add it to the list
194		this.list_target.appendChild( new_row );
195	};
196
197	/**
198	 * Add a new row to the list of files
199	 */
200	this.addListRow = function( element ){
201
202		// Row div
203		var new_row = document.createElement( 'div' );
204
205		// Delete button
206		var new_row_button = document.createElement( 'input' );
207		new_row_button.type = 'button';
208		new_row_button.value = 'Delete';
209
210		// References
211		new_row.element = element;
212
213		// Delete function
214		new_row_button.onclick= function(){
215
216			// Remove element from form
217			this.parentNode.element.parentNode.removeChild( this.parentNode.element );
218
219			// Remove this row from the list
220			this.parentNode.parentNode.removeChild( this.parentNode );
221
222			// Decrement counter
223			this.parentNode.element.multi_selector.count--;
224
225			// Re-enable input element (if it's disabled)
226			this.parentNode.element.multi_selector.current_element.disabled = false;
227
228			//    which nixes your already queued uploads
229			return false;
230		};
231
232		// Set row value
233		new_row.innerHTML = element.value;
234
235		// Add button
236		new_row.appendChild( new_row_button );
237
238		// Add it to the list
239		this.list_target.appendChild( new_row );
240	};
241};
242
243// 2018.11.16 - 박현민 추가 ============================== START ============================================================
244// 등록페이지 첨부파일 초기화
245function fn_egovFile_init(atchFileIdNm, list_target, file_label, maxFileNum, extensions) {
246	//------------------------------------------
247	//------------------------- 첨부파일 등록 Start
248	//-------------------------------------------
249	if(maxFileNum==null || maxFileNum==""){
250		maxFileNum = 2;
251	}
252
253	eval("var "+atchFileIdNm+"_multi_selector= new MultiSelector(document.getElementById('"+list_target+"'), "+maxFileNum+", '"+file_label+"', '"+atchFileIdNm+"', '"+extensions+"')");
254	eval(atchFileIdNm+"_multi_selector.addElement(document.getElementById('"+atchFileIdNm+"'))");
255	//------------------------- 첨부파일 등록 End
256}
257
258// 2018.11.16 - 박현민 추가
259// 수정페이지 첨부파일 초기화
260function fn_egovFile_update_init(atchFileId, atchFileIdNm, list_target, file_label, maxFileNum, existFileNum, extensions) {
261	//------------------------------------------
262	//------------------------- 첨부파일 수정 Start
263	//-------------------------------------------
264	if (existFileNum == "undefined" || existFileNum == null) {
265		existFileNum = 0;
266	}
267	if (maxFileNum == "undefined" || maxFileNum == null) {
268		maxFileNum = 0;
269	}
270
271	var uploadableFileNum = maxFileNum - existFileNum;
272	if (uploadableFileNum < 1) {
273		uploadableFileNum = 1;
274	}
275	eval("var "+atchFileIdNm+"_multi_selector= new MultiSelector(document.getElementById('"+list_target+"'), "+maxFileNum+", '"+file_label+"', '"+atchFileIdNm+"', '"+extensions+"')");
276	eval(atchFileIdNm+"_multi_selector.addElement(document.getElementById('"+atchFileIdNm+"'))");
277
278	if(atchFileId != "" && atchFileId != null){
279		eval(atchFileIdNm+"_fn_egov_multi_selector_update_setting("+atchFileIdNm+"_multi_selector)");
280	}
281	//------------------------- 첨부파일 수정 End
282}
283
284function fn_egov_downFile(atchFileId, fileSn){
285	$.fileDownload(
286		"/admin/cmm/fms/FileDown.do"
287		, {
288			httpMethod: "POST"
289			, data: { atchFileId : atchFileId , fileSn : fileSn }
290		}
291	);
292}
293function fn_egov_downFile2(atchFileId, fileSn){
294	$.fileDownload(
295			"/cmm/fms/FileDown.do"
296			, {
297				httpMethod: "POST"
298					, data: { atchFileId : atchFileId , fileSn : fileSn }
299			}
300	);
301}
302
303function fn_egov_deleteFile(atchFileId, fileSn, delTrName, nm) {
304	ajaxCall(
305			// URL
306			"/admin/cmm/fms/deleteFile.do"
307			// data
308			, {
309			"fileSn" : fileSn
310				, "atchFileId" : atchFileId
311			}
312			// fnSuccess
313			,function(result){
314				var objDelTr = document.getElementById(delTrName);
315				objDelTr.parentNode.removeChild(objDelTr);
316				eval(nm+"_fn_egov_multi_selector_update_delete()");
317			}
318			// fnError
319			,function(req, status, xhr){
320				console.log("code:"+req.status+"\n"+"message:"+req.responseText+"\n"+"error:"+xhr);
321			}
322		);
323}
324function fn_egov_deleteFile2(atchFileId, fileSn, delTrName, nm) {
325	ajaxCall(
326			// URL
327			"/cmm/fms/deleteFile.do"
328			// data
329			, {
330				"fileSn" : fileSn
331				, "atchFileId" : atchFileId
332			}
333			// fnSuccess
334			,function(result){
335				var objDelTr = document.getElementById(delTrName);
336				objDelTr.parentNode.removeChild(objDelTr);
337				eval(nm+"_fn_egov_multi_selector_update_delete()");
338			}
339			// fnError
340			,function(req, status, xhr){
341				console.log("code:"+req.status+"\n"+"message:"+req.responseText+"\n"+"error:"+xhr);
342			}
343	);
344}