[php+javascript] 파일드랍 후 파일리스트 만들기 파일을 일정한 공간에 떨어뜨려서 리스트와 파일첨부 만들어보기

아래의 파일 선택을 멀티로 하면서 그 공간에 파일을 선택 후 떨어뜨린 후 나오게 만들어보는 프로젝트

 

위와 같이 구현해 본 것인데....

하루 넘게 연구한 것 같습니다. 과정이 쉽지는 않더군요.

$("#dropArea").off('drop').on('drop', function(event) {
  event.preventDefault();
  var files = event.originalEvent.dataTransfer.files;
  console.log("dropArea 클릭 후 파일첨부 : ");
  console.log(files);
  setFileInputValue(files);
  uploadFiles(files);
});

function setFileInputValue(files) {
  var fileInput = $("#upfile");
  fileInput.prop("files", files);
}

 

나중에 알게 된거지만, upfile이란 요소에 이렇게 넣어주지 않고, 계속 drop된 파일이 왜 안나오는지...

찾고, 또 찾고.... 무한반복 100회는 한 것 같네요~

그 부분의 php 파일 요소.. 사실 html이지요.

	<div class="col-lg-8 mb-1 text-wrap">
	
		<div class="input-group mb-1 text-wrap">
		  <div id="dropArea" >
			<span class="input-group-text text-wrap">
				<label for="upfile" class="input-group-text btn btn-outline-primary btn-sm"> 파일 첨부 </label>
				<input id="upfile" name="upfile[]" type="file" onchange="this.value" multiple style="display:none"  >			
							
				
				<div id="displayfile" class="d-flex mt-3 mb-1 justify-content-center" style="display:none; word-break:break-all;"></div>
			</span>
		</div>
		</div>
		</div>

 

혹시, 공부하시거나 연구하시는 분들을 위해 실제 사용한 코드를 공유해봅니다.

그리 간단하지 않은 코드같아요~ 모달로 구성된 화면에 뿌리는 것은 더 힘든 것 같아요.

					 
		$("#dropArea").off('drop').on('drop', function(event) {
		  event.preventDefault();
		  var files = event.originalEvent.dataTransfer.files;
			console.log("dropArea 클릭 후 파일첨부 : ");
			console.log(files);
			// 요소에 넣어줌
		  var fileInput = $("#upfile");
		  fileInput.prop("files", files);			
			
		  uploadFiles(files);
		});

		$("#dropArea").off('dragover').on('dragover', function(event) {
		  event.preventDefault();
		});

	 
		// 화면에 뿌려주는 함수	displayfile();의 중복호출을 방지하기 위한 코드 
        var isDisplaying = false;			 
		// 첨부파일 멀티업로드	 이중호출 금지되는 법
		// 첨부파일 멀티업로드 이중호출 금지되는 법
		$("#upfile").off('change').on('change', function(e) {    
			// 선택된 파일이 없는 경우 반환
			if (this.files.length == 0) {
				return;
			}
			
			// 파일 드랍과 연결하여 사용하기 위해 필요한 부분
			var files = this.files;
			console.log("upfile 클릭 후 파일첨부 : ");
			console.log(files);
			uploadFiles(files);
		});

		uploadFiles = function(files) {
			
			    // console.log('전달받은 파일리스트: ' + JSON.parse(files));
			
				$("#id").val($("#num").val());
				$("#parentid").val($("#num").val());
				$("#fileorimage").val('file');
				$("#item").val('attached');
				$("#upfilename").val('upfile');
				$("#tablename").val('workdb');
				$("#savetitle").val('작업지시서 첨부파일');	
			
			// 파일 서버에 저장하는 구간
			var form = $('#board_form')[0];
			var formdata = new FormData(form);

			// 중복호출 금지
			if (ajaxRequest5 !== null) {
				ajaxRequest5.abort();
			}

			ajaxRequest5 = $.ajax({
				enctype: 'multipart/form-data',
				processData: false,
				contentType: false,
				cache: false,
				timeout: 600000,
				url: "../file/file_insert.php",
				type: "post",
				data: formdata,
				success: function(data_insertfile) {
					console.log('data_insertfile');
					console.log(data_insertfile);
					if (!isDisplaying) {
						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 = '';

						// 중복호출 금지
						if (ajaxRequest7 !== null) {
							ajaxRequest7.abort();
						}

						ajaxRequest7 = $.ajax({
							url: url,
							type: "post",
							data: $("#board_form").serialize(),
							dataType: "json",
							success: function(data_attached_exist) {
								ajaxRequest7 = null;
								isDisplaying = false;

								const recid = data_attached_exist["recid"];
								console.log('첨부 이미지 및 파일 json data_attached_exist');
								console.log(data_attached_exist);

								// 수정된 부분: 파일 목록을 담을 div 요소 생성
								var fileListDiv = document.createElement('div');
								fileListDiv.style.overflowY = 'scroll';
								fileListDiv.style.maxHeight = '90px';
								fileListDiv.style.marginBottom = '10px';

								for (i = 0; i < recid; i++) {
									var fileLink = document.createElement('a');
									fileLink.href = './uploads/' + data_attached_exist["file_arr"][i];
									fileLink.download = data_attached_exist["realfile_arr"][i];
									fileLink.innerText = data_attached_exist["realfile_arr"][i];

									var fileDeleteBtn = document.createElement('button');
									fileDeleteBtn.type = 'button';
									fileDeleteBtn.className = 'btn btn-outline-danger btn-sm';
									fileDeleteBtn.id = 'delPic' + i;
									fileDeleteBtn.setAttribute('onclick', "delPicFn('" + i + "','" + data_attached_exist["file_arr"][i] + "')");
									fileDeleteBtn.innerHTML = '<i class="bi bi-x-circle"></i>';

									var fileDiv = document.createElement('div');
									fileDiv.id = 'file' + i;
									fileDiv.appendChild(fileLink);
									fileDiv.innerHTML += '&nbsp;';
									fileDiv.appendChild(fileDeleteBtn);

									fileListDiv.appendChild(fileDiv);
								}

								// 수정된 부분: 파일 목록을 displayfile div 요소에 추가
								var displayFileDiv = document.getElementById('displayfile');
								displayFileDiv.innerHTML = ''; // 기존 내용 제거
								displayFileDiv.appendChild(fileListDiv);
							},
							error: function(jqxhr, status, error) {
								console.log(jqxhr, status, error);
							}
						});
					}
				},
				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

 

아뭏튼 성공해서 파일을 잘 첨부하고, 사용하고 있습니다.

이렇게 첨부된 파일은 클릭하면 다운로드 되고, UI를 보다 편리하게 만드는 것이 목표였습니다.

요구사항들이 많아지면서 점점 복잡한 코드로 연결되지만, 편의를 위한 코드 노력은 계속될 것입니다.