jquery 업로드할 이미지 미리보기 image preview URL.createObjectURL

 

jquery 업로드할 이미지 미리보기 image preview URL.createObjectURL

 

 

이번 포스팅에서는 업로드할 이미지를 미리보기 하는 방법에 대해서 알아보도록 하겠습니다.

위와같이 멀티로 파일을 선택하면 선택된 파일의 미리보기 이미지와 파일명 등이 보여지는 구조 입니다.

 

멀티로 파일을 선택하는 방법은 아래의 Link를 클릭하세요!

 

Link1 : javascript spring 멀티파일선택 업로드 ajaxForm multipart/form-data MultipartHttpServletRequest

 

Link2 : Java Spring File Upload MultipartHttpServletRequest 멀티파일 업로드 방법

 

자세한 설명은 위의 Link를 참고하시고,

멀티로 파일을 선택하기 위해서는 file 태그가 필요하겠죠?

 

<input multiple="multiple" name="files[]" id="files" type="file"/>

 

file태그를 선언합니다.

 

위의 파일 태그에 change 이벤트를 주어서 파일이 선택되었을 때

미리보기 할 이미지와 정보를 보여줄 html 태그를 생성합니다.

 

$('#files').change(function(){
    const target = document.getElementsByName('files[]');

    var html = '';
    $.each(target[0].files, function(index, file){
        const fileName = file.name;
        html += '<div class="file">';
        html += '<img src="'+URL.createObjectURL(file)+'">'
        html += '<span>'+fileName+'</span>';
        html += '<span>기간 '+'<input type="text" style="width:250px/"></span>';
        html += '<a href="#" id="removeImg">╳</a>';
        html += '</div>';
        const fileEx = fileName.slice(fileName.indexOf(".") + 1).toLowerCase();
        if(fileEx != "jpg" && fileEx != "png" &&  fileEx != "gif" &&  fileEx != "bmp" && fileEx != "wmv" && fileEx != "mp4" && fileEx != "avi"){
            alert("파일은 (jpg, png, gif, bmp, wmv, mp4, avi) 형식만 등록 가능합니다.");
            resetFile();
            return false;
        }
        $('.fileList').html(html);
    });
});

 

위 코드에서 중요한 곳은 8번째 줄의 URL.createObjectURL 입니다.

이 메소드는 file, blob 객체의 임시 URL주소를 리턴해주며 페이지가 redirect되면 사라지게 됩니다.

해당 페이지에서 사용 가능한 임시 주소를 리턴해 주기 때문에 img 태그의 src 요소의 값으로 주게되면

미리보기가 가능한 것이죠.

File, Blob, MediaStream, MediaSourece 를 매개변수로 받을 수 있습니다.

 

제일 처음 이미지를 보시면 X 버튼이 있는 것을 보실 수가 있습니다.

이것을 클릭하면 리스트에서 사라지게 됩니다.

하지만 file 객체의 fileList에서는 빠지지 않게 되죠. 그래서 위와 같이 구현을 하게 되면 처음으로 선택된 파일들이

컨트롤러로 전송되게 됩니다.

이를 해결하여, 선택된 마지막 파일들만 컨트롤러로 전달하는 방법은 아래의 Link를 참고하세요.

 

Link : 동적으로 선택된 파일 전달, ajaxForm 활용 fileList 컨트롤, 동적 멀티파일 업로드 dynamic file upload