[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기

Posted at 2020. 3. 25. 18:35 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : https://developer.mozilla.org/ko/docs/Web/API/FileReader

참고 : https://developer.mozilla.org/ko/docs/Web/API/FileList

참고 : https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL

참고 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types





■ FileReader 메소드




속성

설 명

 FileReader.error

 · DOMError 파일을 읽는 도중에 발생한 에러를 나타낸다.

 FileReader.readyState

 · FileReader의 상태를 나타내는 숫자

   ① EMPTY : 0  ( 아직 데이터가 로드 되지 않았음 )

   ② Loading : 1 ( 데이터가 로딩 중 )

   ③ DONE : 2 ( 모든 읽기 요청이 완료됨 )

 FileReader.result

 · 파일의 컨텐츠

 · result 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된

  데이터의 포맷이 정해진 후에 유효하다.

 FileReader.onabort

 · onabort 이벤트는 읽기 동작이 중단 될 때마다 발생한다.

 · abort 이벤트의 핸들러

 FileReader.onerror

 · onerror 이벤트는 읽기 동작에 에러가 생길 때마다 발생한다.

 · error 이벤트이 핸들러

 FileReader.onload

 · onload 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생한다.

 · load 이벤트 핸들러

 FileReader.onloadstart

 · onloadstart 이벤트는 읽기 동작이 실행 될 때마다 발생한다.

 · loadstart 이벤트 핸들러

 FileReader.onloadend

 · onloadend 이벤트는 읽기 동작이 끝났을 때마다 발생한다.( 읽기의 성공 이나 실패 여부는 상관 없다. )

 · loadend 이벤트 핸들러

 FileReader.onprogress

 · onprogress 이벤트는 Blob 컨테트를 읽는 동안 호출된다.

 · progress 이벤트 핸들러



※ Blob란?


Blob 객체는 파일류의 불변하는 미가공 데이터를 나타낸다.

텍스트와 이진 데이터 형태로 읽을 수 있으며, ReadableStream으로 변환한 후 그 메서드를 사용 데이터를 처리할 수 도 있다.


Blob은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있다.

File 인터페이스는 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속한다.








■ 이미지 파일 업로드하고 썸네일 출력하기





# 소스코드

<html>

<head>

<title>:: JavaScript 파일 썸네일 추출 ::</title>

<script type="text/javascript">

    function uploadImgPreview() {


    // @breif 업로드 파일 읽기

    let fileInfo = document.getElementById("upImgFile").files[0];

    let reader = new FileReader();

        // @details readAsDataURL( )을 통해 파일을 읽어 들일때 onload가 실행

        reader.onload = function() {

       

            // @details 파일의 URL을 Base64 형태로 가져온다.

            document.getElementById("thumbnailImg").src = reader.result;

            document.getElementById("thumbnailUrl").innerText = reader.result;

        };


        // @details onload 대신 addEventListener( ) 사용가능

    // reader.addEventListener("load", function() {

        //    document.getElementById("thumbnailImg").src = reader.result;

        //    document.getElementById("thumbnailUrl").innerText = reader.result;

    // }, false);

    if( fileInfo ) {

   

            // @details readAsDataURL( )을 통해 파일의 URL을 읽어온다.

            reader.readAsDataURL( fileInfo );

        }

    }

</script>

</head>

<body>

    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->

    <input type="file" id="upImgFile" onChange="uploadImgPreview();" accept="image/*">

    <hr/>

    <img id="thumbnailImg" src="">

    <br/>

    <div id="thumbnailUrl"></div>

</body>

</html> 





# 출력결과










■ 여러장의 이미지 업로드하고 화면에 나타내기





# 소스코드

<html>

<head>

<title>:: JavaScript 파일 썸네일 추출 ::</title>

<script type="text/javascript">

    function uploadImgPreview() {


    // @breif 업로드 파일 읽기

    let fileList = document.getElementById( "upImgFiles" ).files;


// @breif 업로드 파일 읽기

function readAndPreview( fileList ) {


// @breif 이미지 확장자 검사

if ( /\.(jpe?g|png|gif)$/i.test( fileList.name ) ) {


let reader = new FileReader();


reader.addEventListener( "load", function() {


let image = new Image();


image.width = "264";

image.height = "264";

image.title = fileList.name;

image.src = this.result;


// @details 이미지 확장자 검사

document.getElementById( "thumbnailImgs" ).appendChild( image );


}, false );


// @details readAsDataURL( )을 통해 파일의 URL을 읽어온다.

if( fileList ) {

reader.readAsDataURL( fileList );

}

}

}


    if( fileList ) {


                // @details readAndPreview() 함수를 forEach문을통한 반복 수행

[].forEach.call( fileList, readAndPreview );

        }

    }

</script>

</head>

<body>

    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->

    <input type="file" id="upImgFiles" onChange="uploadImgPreview();" accept="image/*" multiple>

    <hr/>

    <div id="thumbnailImgs"></div>

</body>

</html> 





# 출력결과






관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample






반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 정규 표현식 사용방법  (0) 2020.05.07
[JavaScript] 휴대폰 사진 업로드시 회전 방지  (0) 2020.03.30
[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample  (0) 2020.03.06
[JavaScript] Canvas를 통한 이미지 회전  (6) 2020.03.04
[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기  (0) 2020.03.04
//

티스토리툴바