4.[JS] FileReader 이용하여 업로드 이미지 출력하기

 

현재 나는 새로운 파일을 업로드 할때 마다 그에 맞는 이미지를 출력해야하는데 
이전에 업로드했던 파일의 이미지가 그대로 올라가는 문제가 발생하였다.

 

파일 선택 버튼을 클릭하여 파일을 새로 갱신 할때 마다 이미지 또한 갱신해주는 식으로 변경해야된다.

 

파일 변경시마다 서버 업로드와 이미지 갱신하는 JS코드

$("input[type='file']").change(function(e){
            
            
            var formData = new FormData();
            var inputFile = $("input[name='uploadFile']");
            var files = inputFile[0].files;
    
            for(var i=0; i<files.length; i++){
                //확인 메서드에서 false가 나오면 안됨
                if(!checkExtension(files[i].name, files[i].size)){
                    return false;
                }
                //append:요소추가
                formData.append("uploadFile",files[i]);
            }
            //ajax로 서버(uploadAjaxAction)에 전송
            $.ajax({
                url: '/uploadAjaxAction',
                processData: false, 
                contentType: false,
                //ajax로 csrf토큰 전송
                beforeSend: function(xhr){
                    xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);
                },
                data: formData,
                type: 'POST',
                dataType: 'json',
                success: function(result){
                    console.log(result)
                    showUploadResult(result);
                }
            }); // End ajax
            
        }); //End change

 

해당 코드 아래에 파일 이미지 갱신 코드를 추가하여 주자

$("input[type='file']").change(function(e){  

//파일 변경 시마다 이미지도 갱신
if(this.files && this.files[0]){
var reader = new FileReader;
reader.onload = function(data){
$(".box img").attr("src", data.target.result).width(500);
}
reader.readAsDataURL(this.files[0]); }

자바스크립트에서 선택한 이미지를 동기방식으로 보여줘야되는 경우

FileReader 객체가 쓰인다고 한다.

 

파일 이미지를 화면에 보여주는 JS코드

function showUploadResult(uploadResultArr){
    if(!uploadResultArr || uploadResultArr.length == 0){
        return;
    }
    var uploadUL = $(".box");
    var str ="";
    $(uploadResultArr).each(function(i,obj){
 
        if(obj.image){
            var fileCallPath =  encodeURIComponent( obj.uploadPath+ "/s_"+obj.uuid +"_"+obj.fileName);
            str += "<li data-path='"+obj.uploadPath+"'";
            str +=" data-uuid='"+obj.uuid+"' data-filename='"+obj.fileName+"' data-type='"+obj.image+"'"
            str +" ><div>";
            str += "<span> "+ obj.fileName+"</span>";
            str += "<button type='button' data-file=\'"+fileCallPath+"\' " //button x표시
            str += "data-type='image' class='btn btn-warning btn-circle'><i class='fa fa-times'></i></button><br>";
            str += "<img src='/display?fileName="+fileCallPath+"'>";
            str += "</div>";
            str +"</li>";
            
        }else if(!obj.image){
            return false;
                
            }
                    
 
    uploadUL.append(str);
});//End showUploadResult        
}

 

 

기존은 파일의 주소와 같은 내용값만 변경해주었고 이미지에 대한 변경내용은 없었다.
이 때문에 파일 변경시 새로운 이미지가 아닌 이전 파일의 이미지가 계속 고정되있는 문제점이 발생했었다.
파일 갱신과 더불어 이미지의 갱신코드를 추가해줌으로써 문제가 해결되었다.