SW과정 Spring 18일차 - 0819

30793 단어 JavastsSpringJava

SW과정 Spring 18일차 - 0819🏆

JSP로 파일 업로더 만들기

event.preventDefault();
event.originalEvent는 순수한 원래의 DOM이벤트를 가지고옴
JQuery를 사용할경우 순수한 DOM이벤트가 아님
dataTransfer는 이벤트와 같이 전달된 데이터를 의미
그 안에 포함된 파일 데이터를 찾아내기 위해 dataTransfer.files를 사용함
let files = event.originalEvent.dataTransfer.files; let file = files[0];
파일이름을 바로 알아낼수 있음
file.name;
alert(file.name+"입니다")

JAVA 소스코드 사이트 MVNrepsitory 바로가기

.each 문

```$.each($(".human"),function(index,item){files[index]=$(this).attr("data-src");files.push($(this).attr("data-src"));});```

배열을 직렬화해서 전송함
직렬화 했을때는 files : 값 형식으로 전송되고
직렬화 하지 않을때는 files[]: 값 이런 형식으로 전송됨

.JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 멀티 파일 업로드</title>
<style>
.fileDrop, .uploadedList {
	width: 50%;
	height: 300px;
	border: 1px dotted blue;
	margin: 0 auto;
	}

h3 {
	text-align: center;
	}

#human{
	width: 50%;
	height: 300px;
	margin: 0 auto;
   }

small {
	margin-left: 3px;
	font-weight: bold;
	color: gray;
}

</style>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<h3>Ajax File Upload</h3>
	<div class='fileDrop'></div>
	<div class='uploadedList'></div>
	<br>
	<div id="human"><input type="button" value="모두삭제" /></div>

	<script>	
	$(".fileDrop").on("dragenter dragover", function(event){
		event.preventDefault();		
	});
	
	$(".fileDrop").on("drop", function(event){		
		event.preventDefault();	
// 		event.originalEvent는 순수한 원래의 DOM이벤트를 가지고 옮
//		JQuery를 사용할경우  순수한 DOM이벤트가 아님
//		dataTransfer는 이벤트와 같이 전달된 데이터를 의미
//		그 안에 포함된 파일 데이터를 찾아내기 위해 dataTransfer.files
//		를 사용함	
		let files = event.originalEvent.dataTransfer.files;			
// 		let file = files[0];
// 		파일이름을 바로 알아낼수 있음
// 		file.name;
// 		alert(file.name+"입니다")
					
		let formData = new FormData();
		$.each(files,function(index,item){ //반복문
			formData.append("multiFile", item); //멀티플
		});				
		
		$.ajax({
			  url: '/fullstack/uploadAjax.bbs',
			  dataType:'json',	
			  type: 'POST',
//			  processData: false는
//			  데이터를 일반적인 query string으로 변활할 것인지를 결정, 기본값은 true , 
//			  'application/x-www-form-urlencoded' 타입으로 전송, 
//			  다른 형식으로 데이터를 보내기 위하여 자동 변환하고 싶지 않은 경우는 false로 지정
			  processData: false,
			  
//			  contentType: false 는
//			  기본값은 'application/x-www-form-urlencoded', 파일의 경우 'multipart/form-data'
//			  방식으로 전송하기 위해서 false
			  contentType: false,	
			  data: formData,
			  
			  success: function(data){
				  let str ="";			 
				  			  
				  $.each(data,function(index, fileName){				 
					  if(checkImageType(fileName)){						 
						  str ="<div><a href=displayFile.bbs?fileName="+getImageLink(fileName)+">"
								  +"<img src='displayFile.bbs?fileName="+fileName+"'/>"	
								  +"</a><small class='human' data-src='"+fileName+"'>X</small></div>";
					  }else{
						  str = "<div><a href='displayFile.bbs?fileName="+fileName+"'>" 
								  + getOriginalName(fileName)+"</a>"
								  +"<small class='human' data-src='"+fileName+"'>X</small></div>";
					  }
					  
					  $(".uploadedList").append(str);
				  });				 
			  },
			  error : function(xhr){
					alert("error html = " + xhr.statusText);
			  }			  
			});	
	});
	
	function checkImageType(fileName){			
// 		/i는 대소문자 구분 하지 말라는 뜻임
		let pattern = /.jpg|.gif|.png/i;		
		return fileName.match(pattern);		
	}
	
	function getImageLink(fileName){		
		let front = fileName.substr(0,12);
		let end = fileName.substr(14);
		alert(front + end);		
		return front + end;	
	}
	
	function getOriginalName(fileName){		
		let idx = fileName.indexOf("_") + 1 ;
		return fileName.substr(idx);	
	}
	
	$(".uploadedList").on("click", "small", function(event){			
		let that = $(this);
	   $.ajax({
		   url:"/ajaxMultiFileUpload/deleteFile.bbs",
		   type:"post",
		   data: {
			   fileName:$(this).attr("data-src")  //prop() 			    
		   },
		   dataType:"text",		 
		   success:function(result){
			   if(result == 'deleted'){				   
				   that.parent("div").remove();
				   alert("삭제성공");
			   }
		   }
	   });
	});
	
// 	$("input").on("click",function(){
	$("input[type=button]").on("click",function(){
// 억지로 만든겁니다
// 	$("input[value=모두삭제]").on("click",function(){	
	let files=[];
		$.each($(".human"),function(index,item){
// 			files[index]=$(this).attr("data-src");
			files.push($(this).attr("data-src"));						
		});					
//	 	배열을 직렬화해서 전송함 
//      직렬화 했을때는 files : 값 형식으로 전송되고
//      직렬화 하지 않을때는 files[]: 값  이런 형식으로 전송됨
	   $.ajaxSettings.traditional = true;
	   $.ajax({
		   url:"/ajaxMultiFileUpload/deleteAllFiles.bbs",
		   type:"post",
		   data: { files: files},
		   dataType:"text",		  
		   success:function(result){
			   if(result == 'deleted'){
				   $(".uploadedList").children().remove();
				   alert("삭제성공");
			   }
		   }
	   });
	});
	
	
	
</script>

















</body>
</html>
개발 기초 | 깃(Git) 이란?
first()와 get()

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage