SPRING/chapter07_File

uploadAjax.jsp

GAWON 2023. 7. 7. 18:07 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
   
   <h1>Upload with Ajax</h1>
   
   <div class="uploadDiv">
      <input type="file" name="uploadFile" multiple>
   </div>
   
   <div class="uploadResult">
   		<ul></ul>
   </div>
   
   <button id="uploadBtn">Upload</button>
   
   
   <script type="text/javascript">
   	var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");	//정규식
   	var maxSize = 5242880;	//5MB
    var cloneObj = $(".uploadDiv").clone();
   	
   	
   	function checkExtension(fileName,fileSize){
   		if(fileSize >= maxSize){
   			alert("파일 사이즈 초과");
   			return;
   		}
   		
   		if(regex.test(fileName)){
   			alert("해당 종류의 파일은 업로드할 수 없습니다.");
   			return false;
   		}
   		return true;	
   	}

      $("#uploadBtn").on('click', function(){
         var formData = new FormData();
         var inputFile = $("input[name='uploadFile']");
         var files = inputFile[0].files;
         console.log(files);
      
      	for(var i=0; i<files.length; i++){
      		if(!checkExtension(files[i].name, files[i].size)){
      			return false;
      		}
      		
      		
      		formData.append('uploadFile', files[i]);
      	}
      	
      	 $.ajax({
             type : 'post',
             url : '/uploadAjaxAction',
             data : formData,
             contentType : false,
             processData : false,
             dataType : 'json',
             success : function(result){
               	console.log(result);
               	$(".uploadDiv").html(cloneObj.html());
               	showUploadFile(result);
             }
             
          });
      });
      
      var uploadResult = $(".uploadResult ul");
      function showUploadFile(uploadResultArr){
    	  //전달 받은 객체에서 '파일명'만을 화면에 li 태그로 출력 => uploadResult 내부에
    	  var str = '';
    	   
    	   $(uploadResultArr).each(function(i, obj) {
    		   
    		  var fileCallPath = encodeURIComponent(obj.uploadPath +
    				  								"/" + obj.uuid + 
    				  								"_" + obj.fileName);
    		   
    		  str += '<li>';
    		  str += '<a href="/download?fileName=' + fileCallPath + '">';
    	      str += '<img src="/resources/img/attach.png" style="width:15px">' + obj.fileName;
    	      str += '</a>';
    	      str += '<span data-file="' + fileCallPath + '"> X </span>';
    	      str += '</li>';
    	   });
    	   
    	   uploadResult.html(str);
      }
      	
      //위 span(X) 에 클릭 이벤트
      	uploadResult.on('click','span',function(){
      //var targetFile = 눌려진 객체의 fileCallPath 값 가져오기
      		var targetFile = $(this).data('file');
      
      		 $.ajax({
                 type : 'post',
                 url : '/deleteFile',
                 data : {fileName : targetFile},//fileName키 : targetFile값
                 dataType : 'text',
                 success : function(result){
                   	alert(result);
                 }
                 
              });
          });		
      
      
      
   		
      	
      
   </script>
</body>
</html>
저작자표시