[웹개발] 멀티파일 저장하는 함수들 나름 정리

이거 수정하느라 반나절이 흘렀다.

알고보면 너무 단순한 것에 오류였음을 깨달았을때는 이미....

시간이 훌쩍 지난 후에....

하지만, 기록을 남겨서 다음에는 다시 반복하지 않도록 노력하자.

	 
		// 화면에 뿌려주는 함수	displayfile();의 중복호출을 방지하기 위한 코드 
        var isDisplaying = false;			 
		// 첨부파일 멀티업로드	 이중호출 금지되는 법
		$("#upfile").off('change').on('change', function(e) {    
		
			// 선택된 파일이 없는 경우 반환
			if (this.files.length == 0) {
				return;
			}
			
		
				$("#id").val($("#num").val());
				$("#parentid").val($("#num").val());
				$("#fileorimage").val('file');
				$("#item").val('attached');
				$("#upfilename").val('upfile');
				$("#tablename").val('workdb');
				$("#savetitle").val('작업지시서 첨부파일');		
			  
			  // 파일 서버에 저장하는 구간	
				// 폼데이터 전송시 사용함 Get form         
				var form = $('#board_form')[0];  	    
				// Create an FormData object          
				var formdata = new FormData(form); 	
				// console.log(data);				
			  // 중복호출 금지	
			  

			  // data 전송해서 php 값을 넣기 위해 필요한 구문
			  ajaxRequest5 = $.ajax({
						enctype: 'multipart/form-data',  // file을 서버에 전송하려면 이렇게 해야 함 주의
						processData: false,    
						contentType: false,      
						cache: false,           
						timeout: 600000, 			
						url: "../file/file_insert.php",
						type: "post",		
						data: formdata,						
						success : function(data){	
						
						console.log(data);
						if (!isDisplaying) {
							displayfile();
						}

						},
						error : function( jqxhr , status , error ){
							console.log( jqxhr , status , error );
						
									} 			      		
					   });	

		});		   
		 
		// 첨부파일 삭제
		 delPicFn = function(divID, delChoice) {
				 
		// DATA 삭제버튼 클릭시
			Swal.fire({ 
				   title: '첨부파일 삭제', 
				   text: " 삭제는 신중해야 합니다. '\n 삭제 하시겠습니까?", 
				   icon: 'warning', 
				   showCancelButton: true, 
				   confirmButtonColor: '#3085d6', 
				   cancelButtonColor: '#d33', 
				   confirmButtonText: '삭제', 
				   cancelButtonText: '취소' })
				   .then((result) => { if (result.isConfirmed) { 						
								  // 중복호출 금지	
								  ajaxRequest6 = null;
								  if (ajaxRequest6 !== null) {
									ajaxRequest6.abort();
								  }

							  // data 전송해서 php 값을 넣기 위해 필요한 구문
							  ajaxRequest6 = $.ajax({
									url:'./file/del_file.php?savename=' + delChoice ,
									type:'post',
									data: $("board_form").serialize(),
									dataType: 'json',
									success : function(data){	
									   ajaxRequest6 = null;										
									   const savename = data["savename"];		   
									   
									  // 시공전사진 삭제 
										$("#file" + divID).remove();  // 요소 삭제
										$("#delPic" + divID).remove();  // 버튼 삭제									
										
											},
											error : function( jqxhr , status , error ){
													ajaxRequest6 = null;	
													console.log( jqxhr , status , error );
														} 			      		
										   });
							
							   } 
						}) }  // end of delPicFn
					
								  
		  async function displayfile() {
			// some other code...

			await displayfile_sub();  // This line will block until displayfile() has completed

			// code here won't run until displayfile() is finished
		}
								  
		// 첨부된 파일 불러와 화면에 표시하는 루틴
		async function displayfile_sub() {       

			isDisplaying = true; // 함수가 실행 중임을 표시

			$('#displayfile').show();

			if($("#num").val() != null && $("#num").val().trim() !== '') 
				params = $("#num").val();	
			else
				params = $("#tmpKey").val(); // 임시키 부여함


		console.log('전송하는 params');
		console.log(params);
			var tablename = 'workdb';    
			var item = 'attached';

			var url = '../file/load_file.php?id=' + params + '&tablename=' + tablename + '&item=' + item;
			var formData = '';

			try {
				let response = await fetch(url, {
					method: 'POST',
					body: formData
				});

				if (!response.ok) throw new Error("Response Error: " + response.status);

				let data = await response.json();

				isDisplaying = false; // 함수 실행이 완료됨을 표시

				const recid = data["recid"];         
				console.log('첨부 이미지 및 파일 json data');
				console.log(data);
				$("#displayfile").html('');
				for(i=0;i<recid;i++) {   
					$("#displayfile").append("&nbsp;&nbsp;&nbsp;&nbsp;  <div id='file" + i + "'>  <a href='./uploads/" + data["file_arr"][i] + "' download='" +  data["realfile_arr"][i]+ "'>" +  data["realfile_arr"][i] + "</div>  " );             
					$("#displayfile").append("&nbsp;<button type='button' class='btn btn-danger btn-sm' id='delPic" + i + "' onclick=delPicFn('" + i + "','" + data["file_arr"][i] + "')> <i class='bi bi-dash-circle'></i> </button> &nbsp;&nbsp;&nbsp;&nbsp; ");                     
				}  

			} catch (error) {
				isDisplaying = false; // 함수 실행이 실패했으나 완료됨을 표시
				console.log(error);
			}
		}

 

멀티파일을 저장하고 불러오는 함수를 나름 만들었는데,

아직도 더 손봐야 할지 모르지만, 일단 기록을 남겨둔다.

나의 노력의 시간들이다.