브라우저에서 섬네일 처리

-업로드 후에 업로드 부분 초기화 input type='file'
-업로드 후 파일 이름을 목록으로 처리 
-일반 파일 업로드 후 처리 (첨부파일 아이콘보여주기) 
-섬네일 이미지 보여주기 (컨트롤러에 특정한 파일 이름을 받아 데이터를 전송하는 코드생성, 
					안전한 URI호출을 위해 자바스크립트 처리 ) 

<화면 작업>

브라우저에서 첨부파일의 업로드 결과가 JSON 객체로 반환되었다면 다음의 작업이 남았다.

• 업로드 후에 업로드 부분을 초기화시키기
• 결과 데이터를 이용해서 화면에 섬네일 혹은 파일 이미지를 보여주기

현재 업로드는 uploadAjax.jsp에서 <input type='file'>을 통해 이루어진다.

이와 같은 방법은 한 번 업로드가 끝난 후 이를 초기화 시켜주는 작업과 업로드된 결과를 화면에 
반영해주어야 한다.

1. 의 초기화

	<input type='file'>은 다른 DOM 요소와 다르게 readonly라 안쪽의 내용을 수정할 수 
    없기 때문에 별도의 방법으로 초기화 시켜서 또 다른 첨부파일을 추가할 수 있도록 한다.
    
    			var cloneObj = $(".uploadDiv").clone();

    우선 첨부파일을 업로드 하기 전에 아무 내용이 없는  <input type='file'>을 복사한다.
    
  첨부파일을 업로드한 뒤에는 복사된 객체를 <div> 내에 다시 추가해서 첨부파일 부분을 초기화
  시킨다.
  
  $.ajax({
			url: '${pageContext.request.contextPath}/uploadAjaxAction',
			processData : false,
			contentType : false,
			data : formData,
			type : 'POST',
			dataType: 'json',
			success : function(result){
				console.log(result);
				alert("Uploaded");
				
				showUploadedFile(result);
				
				$(".uploadDiv").html(cloneObj.html());
			}
			
			
		}); //$.ajax	
        
        
        		$(".uploadDiv").html(cloneObj.html());을 추가한다. 

2.업로드된 이미지 처리

	업로드 된 결과는 JSON 형태로 받아왔기 때문에 이를 이용해 화면에 적절한 섬네일을
    보여주거나 화면에 파일 아이콘 등을 보여주어서 결과를 피드백해줘야 한다. 
    
    Ajax 처리결과를 보여주도록 한다.
    
    1) 파일 이름 출력 
    	uploadAjax.jsp에 별도의 자바스크립트 함수를 추가해 특정한 <ul>태그 내에
        업로드된 파일 이름을 보여준다.
        
        화면에 <ul>태그를 작성해 첨부파일 이름을 목록으로 처리할 수 있도록 준비한다.
       
       
       var uploadResult = $(".uploadResult ul");
	
			function showUploadedFile(uploadResultArr){
			
			 var str= "";
			
			$(uploadResultArr).each(function(i, obj){
            
            str += "<li> " + obj.fileName + " </li>";
            
            });
			
			uploadResult.append(str);
		 }	
	
    showUploadedFile()은 JSON 데이터를 받아서 해당 파일의 이름을 추가한다.
    Ajax 결과에서는 받은 JSON 데이터를 showUploadedFile()을 호출하도록 수정한다.
    
    .ajax({
			url: '${pageContext.request.contextPath}/uploadAjaxAction',
			processData : false,
			contentType : false,
			data : formData,
			type : 'POST',
			dataType: 'json',
			success : function(result){
				console.log(result);
				alert("Uploaded");
				
				showUploadedFile(result);
				
				$(".uploadDiv").html(cloneObj.html());
			}
			
			
		}); //$.ajax
	
    
  **  showUploadedFile(result)를 추가한다. 
  
  2) 일반 파일 처리 
  	
    첨부파일의 섬네일 이미지를 보여주는 작업 전에 우선적으로 일반 파일이 업로드 된 
    상황에서 첨부파일의 아이콘을 보여주도록 수정한다.
    
    우선 webapp/resources/에 img폴더를 생성한다. 
    일반 첨부파일 이미지를 보여줄 png 파일을 추가한다. 
    
 <style>
   .uploadResult {
width: 100%;
background-color: pink;} 

.uploadResult ul {
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;}

.uploadResult ul li {
list-style: none;
padding: 10px;}

.uploadResult ul li img {
width: 20px;}

</style> 

약간의 스타일을 적용해서 첨부파일 영역을 처리한다.

function showUploadedFile(uploadResultArr){
			
			var str= "";
			
			$(uploadResultArr).each(function(i, obj){
				
				if(!obj.image){
					
					var fileCallPath = encodeURIComponent(obj.uploadPath+ "/" +obj.uuid+ "_" + obj.fileName);

					str+= "<li><img src='/resources/img/png-transparent-heart-heart-thumbnail.png'> " 
								+ obj.fileName + "</li>";
				}else{
					
                    
                    str += "<li> " + obj.fileName + " </li>"; 				
				}
				
			});
			
			uploadResult.append(str);
			
		}	
	

    
    🌿showUploadedFile()은 이미지 파일이 아닌 경우에 파일 아이콘을 보여주는 형태로 작성된다. 

3. 섬네일 이미지 보여주기

	이미지 파일의 경우에는 섬네일 파일을 보여준다.
    
    섬네일은 서버를 통해서 특정URI를 호출하면 보여줄 수 있도록 처리하는데,
    해당 파일의 경로와 uuid가 붙은 파일의 이름이 필요하므로 조금 복잡하다.
    
    서버에서 섬네일은 GET방식을 통해서 가져올 수 있도록 처리한다. 
    특정한 URI 뒤에 파일 이름을 추가하면 이미지 파일 데이터를 가져와서 <img> 태그를
    작성하는 과정을 통해서 처리한다. 
    
    서버에 전송하는 데이터는 '파일의 경로'+'s_'+'uuid가 붙은 파일의 이름'이다.
    
    이때 주의해야 할 것은 경로나 파일 이름에 한글 혹은 공백 등의 문자가 들어가면
    문제가 발생하므로 JavaScript의 encodeURIComponent()함수를 이용해 URI에 
    문제가 없는 문자열을 생성해서 처리한다.
    
    

uploadController에서는 특정한 파일 이름을 받아서 이미지 데이터를 전송하는 코드를 우선 생성한다.

    @GetMapping("/display")
	@ResponseBody
	public ResponseEntity<byte[]> getFile(String fileName){
		
		
		File file = new File("/Users/****/Desktop/untitledfolder/temp/" +  fileName);
		
		ResponseEntity<byte[]> result = null;
		
		try {
			
			
			org.springframework.http.HttpHeaders header = new org.springframework.http.HttpHeaders();
			header.add("Content-Type",Files.probeContentType(file.toPath()));
			result = new ResponseEntity<byte[]>(FileCopyUtils.copyToByteArray(file), header, HttpStatus.OK);
			
		}catch (Exception e) {
			
			e.printStackTrace();
			// TODO: handle exception
		}
		
		return result;
	}

getFile()은 문자열로 파일의 경로가 포함된 fileName을 파라미터로 받고 byte[]를 전송한다.

byte[]로 이미지 파일의 데이터를 전송할 때 신경쓸 것은 브라우저에 보내주는 MINE 타입이 파일의 종류에 따라 달라지는 것이다.

이 부분을 위해 probeContentType()을 이용해 적절한 MINE 타입 데이터를 헤더 메시지에 포함할 수 있도록 처리한다.

호출은 'display?fileName=년/월/일/파일이름' 형태로 호출한다.

이렇게 하면 올바르게 이미지가 보이며, 파일의 확장자에 맞게 MINE 타입이 변경되는 것을 볼 수 있다.

브라우저에서 GET 방식으로 첨부파일의 이름을 사용할 때는 항상 파일의 이름에 포함된
공백 문자나 한글 이름이 문제가 될 수 있다 .

이를 수정하기 위해 encodeURIComponent()를 이용해서 URI 호출에 적합한 문자열로 인코딩 처리를 해야한다.

JavaScript에서 처리해준다.

function showUploadedFile(uploadResultArr){
		
		var str= "";
		
		$(uploadResultArr).each(function(i, obj){
			
			if(!obj.image){
				
				var fileCallPath = encodeURIComponent(obj.uploadPath+ "/" +obj.uuid+ "_" + obj.fileName);

				str+= "<li><img src='/resources/img/png-transparent-heart-heart-thumbnail.png'> " 
							+ obj.fileName + "</li>";
			}else{
				
                
                //str += "<li> " + obj.fileName + " </li>"; 	
                var fileCallPath = encodeURIComponent(obj.uploadPath
                 + "/s_"+obj.uuid+"_"+obj.fileName);
                str +="<li><img src='/display?fileName="+fileCallPath+"'></li>";
                 
                 
			}
			
		});
		
		uploadResult.append(str);
		
	}	

🍊 브라우저에서는 이미지 종류의 파일을 업로드한 경우에는 섬네일 이미지가, 일반 파일의 경우에는 파일 아이콘이 보이게 된다.