브라우저에서 섬네일 처리

 

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

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

 

23.1 <input type = 'file'>의 초기화

<input type ='file'>은 다른 DOM 요소들과 조금 다르게 readonly라 안쪽의 내용을 수정할 수 없기 때문에 별도의 방법으로 초기화 시켜서 또 다른 첨부파일을 추가할 수 있도록 만들어야 한다.

 

• uploadAjax.jsp

var cloneObj = $(".uploadDiv").clone();
        
    $("#uploadBtn").on("click", function(e){
        var formData = new FormData();
        var inputFile = $("input[name='uploadFile']");
        var files = inputFile[0].files;
        console.log(files);
        
        //add filedate to formdata
        for(var i=0; i<files.length; i++) {
            if(!checkExtension(files[i].name, files[i].size)) {
                return false;
            }
            formData.append("uploadFile", files[i]);
        }
        
        $.ajax({
            url: '/uploadAjaxAction',
            processData : false,
            contentType: false,
            data: formData,
            type: 'POST',
            dataType:'json',
            success: function(result) {
                
                console.log(result);
                $(".uploadDiv").html(cloneObj.html());
            }
        });

- 첨부파일을 업로드하기 전에 아무 내용이 없는 <input type ='file'> 객체가 포함된 <div>를 복사한다.

- 첨부파일을 업로드 한 뒤에는 복사된 객체를 <div>내에 다시 추가해서 첨부파일 부분을 초기화 시킨다.

 

화면에서 첨부파일을 추가하고 버튼을 클릭하면 이전과 달리 첨부파일을 다시 추가할 수 있는 형태로 변경되는 것을 확인할 수 있다.

 

 

---

23.2 업로드된 이미지 처리

업로드된 결과는 JSON 형태로 받아왔기 때문에 이를 이용해서 화면에 적절한 섬네일을 보여주거나 화면에 파일 아이콘 등을 보여주어서 결과를 피드백해줄 필요가 있다.

 

 

• 파일 이름 출력

  • uploadAjax.jsp에는 별도의 JavaScript 함수를 추가해서 특정한 <ul> 태그 내에 업로드된 파일의 이름을 보여주도록 한다.

 

• uploadAjax.jsp

<div class="uploadResult">
    <ul>
    
    </ul>
</div>
<button id='uploadBtn'> Upload </button>
 
 
var uploadResult = $(".uploadResult ul");
        function showUploadedFile(uploadResultArr) {
            var str = "";
            $(uploadResultArr).each(function(i, obj) {
                str+= "<li>" + obj.fileName + "</li>";
            });
            uploadResult.append(str);
        }
        
        var cloneObj = $(".uploadDiv").clone();
        
    $("#uploadBtn").on("click", function(e){
        var formData = new FormData();
        var inputFile = $("input[name='uploadFile']");
        var files = inputFile[0].files;
        console.log(files);
        
        //add filedate to formdata
        for(var i=0; i<files.length; i++) {
            if(!checkExtension(files[i].name, files[i].size)) {
                return false;
            }
            formData.append("uploadFile", files[i]);
        }
        
        $.ajax({
            url: '/uploadAjaxAction',
            processData : false,
            contentType: false,
            data: formData,
            type: 'POST',
            dataType:'json',
            success: function(result) {
                
                console.log(result);
                
                showUploadedFile(result);
                
                $(".uploadDiv").html(cloneObj.html());
            }
        });

- uploadAjax.jsp에는 별도의 JavaScript 함수를 추가해서 특정한 <ul> 태그 내에 업로드된 파일의 이름을 보여주도록 한다.

- showUploadedFile()은 JSON 데이터를 받아서 해당 파일의 이름을 추가한다. Ajax 결과에서는 받은 JSON 데이터를 showUploadedFile()을 호출하도록 수정한다.

 

 

화면에서는 업로드 후에 단순하게 업로드도니 파일의 이름들이 보이는 것을 확인할 수 있다. 

 

 

 

• 일반 파일의 파일 처리

  • 우선 일반 파일이 업로드된 상황에서 첨부파일 아이콘을 보여주도록 수정한다.
  • 기존 webapp/resources 밑에 폴더 내용을 그대로 추가하고 img 폴더를 생성한다. 일반 첨부파일의 이미지를 보여줄 attach.png 추가

 

 

uploadAjax.jsp 에서 일반 파일의 경우에는 attach.png 이미지가 보이게 수정한다.

 

• uploadAjax.jsp

<style>
    .uploadResult {
        width:100%;
        background-color : gray;
    }
    .uploadResult ul {
        display:flex;
        flex-flow: row;
        justify-contetn: 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) {
                    str+="<li><img src='/resources/img/attach.png'>" + obj.fileName + "</li>";
                } else {
                    str += "<li>"+obj.fileName + "</li>";
                }
            });
            uploadResult.append(str);
        }

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

 

 

일반 파일 첨부했을 때

 

 

 

• 섬네일 이미지 보여주기

  • 일반 파일은 단순히 파일 이미지만을 보여주지만 이미지 파일의 경우에는 섬네일 파일을 보여주어야 한다.
  • 섬네일 서버를 통해서 특정 URI를 호출하면 보여줄 수 있도록 처리한다.
  • 해당 파일의 경로와 uuid가 붙은 파일의 이름이 필요하다. 섬네일은 GET 방식을 통해서 가져올 수 있도록 처리한다.
  • 특정 URI 뒤에 파일 이름을 추가하면 이미지 파일 데이터를 가져와서 <img> 태그를 작성하는 과정 통해 처리한다.

 

서버에 전송하는 데이터 : '파일의 경로' + 's_' + 'uuid가 붙은 파일 이름'

이때 경로나 파일 이름에 한글 혹은 공백 등의 문자가 들어가면 문제가 발생할 수 있으므로 JavaScript의  encodeURIComponent() 함수를 이용해서 URI에 문제가 없는 문자열을 생성해서 처리한다.

 

 

 

<UploadController에서 섬네일 데이터 전송하기>

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

 

• UserController

@GetMapping("/display")
    @ResponseBody
    public ResponseEntity<byte[]> getFile(String fileName) {
        log.info("fileName: " + fileName);
        File file = new File("C:\\upload\\" + fileName);
        log.info("file : " + file);
        ResponseEntity<byte[]> result = null;
        
        try {
            HttpHeaders header = new HttpHeaders();
            header.add("Content-Type",  Files.probeContentType(file.toPath()));
            result = new ResponseEntity<byte[]>(FileCopyUtils.copyToByteArray(file),
                    header, HttpStatus.OK);
        }catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }

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

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

- 이 부분을 해결하기 위해서 probeContentType()을 이용해서 적절한 MIME 타입 데이터를 Http의 헤더 메시지에 포함할 수 있도록 처리한다.

 

 

 

 

<JavaScript 처리>

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

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

 

• uploadAjax.jsp

function showUploadedFile(uploadResultArr) {
            var str = "";
            $(uploadResultArr).each(function(i, obj) {
                if(!obj.image) {
                    str+="<li><img src='/resources/img/attach.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);
}

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

 

 

---

출처 : 코드로 배우는 스프링 웹 프로젝트 [구멍가게 코딩단]