[HTML5/CSS3/JQUERY] file 접근

FILE

웹 어플리케이션이 로컬 파일의 내용에 접근할 수 있도록 하는 API

FILE API INTERFACE

file interface를 사용하면 file의 file name이나 size 등의 기본적인 정보에 접근할 수 있다.

file reader interface는 file의 내용을 읽을 수 있는 기능을 제공한다.

file interface는 browser가 막 건드릴 수 있는 것이 아니라 file 선택 form이나 drag & drop을 통해서

사용자가 직접 선택한 file에 한정되므로 보안문제는 안심해도 된다.

FILE INTERFACE

METHOD	설명
NAME	FILE의 이름
TYPE	FILE의 MIME TYPE(알 수 없을 때는 NULL)
URN	FILE의 범용 식별자
SIZE	FILE SIZE
SLICE(START, LENGTH)	시작위치와 끝위치를 지정하여 파일의 내용을 잘라내 새로 운 BLOB 객체를 만드는 함수

FILE READER INTERFACE

file reader interface는 비동기적인 상황에서 사용한다.

METHOD	설명
readAsBinaryString(fileBlob)	file 내용을 읽어 binary 문자열로 저장
readAsText(fileBlob, encoding)	file 내용을 읽어 문자열로 저장. 두번째 인수값은 file에 encoding을 지정할 수 있음(defalut: UTF-8)
readAsDataURL(file)	file 내용을 읽어 dataURL 형식의 문자열로 저장
result	읽어들인 file의 내용
error	error 발생 시의 error 정보
onload	읽기에 성공하였을 때 호출하는 이벤트 핸들러. load event에 대응한다.
onprogress	읽기의 진행상황을 얻을 수 있는 이벤트 핸들러. progress event에 대응한다.
onerror	읽기 error 시에 호출되는 이벤트 핸들러. error event에 대응한다.

ERROR

다음은 file reader가 동작하는 중에 발생하는 error에 대한 상수값들이다.

상수	CODE	설명
NOT_FOUND_ERR	1	읽을 FILE을 찾지 못할 때
SECURITY_ERR	2	web application이 access 하기에 안전하지 못한 file일 때 / file에 너무 많은 읽기 호출이 있을 때 / 사용자의 선택 이후에 file에 변경이 있을 때
ABORT_ERR	3	예를 들어 abort() 함수 호출과 같은 것으로 인해 읽기가 중지되었을 때
NOT_READABLE_ERR	4	file 접근 권한 문제와 같은 것으로 인해 file을 읽지 못할 때
ENCODING_ERR	5	동기적, 비동기적으로 readAsText()함수를 사용할 때는 사용할 수 없다. DataURL로 표현될 수 있는 file이나 blob을 구현한 제한된 곳의 dataURL에 대한 URL 길이 제한에 걸렸을 때

fileTest.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    window.onload = function() { 
        document.getElementById("btnStart").onclick = function() { 
            readFile(); 
        } 
    } 
     
    function readFile() { 
        var file = document.getElementById("file").files[0]; 
        document.getElementById("filename").textContent = file.name; 
        document.getElementById("filesize").textContent = "("+file.size+" byte)"; 
         
        var reader = new FileReader(); 
        reader.onload = function() { 
            var display = document.getElementById("content"); 
            display.textContent = reader.result; 
        } 
        reader.onerror = function(e) { 
            alert("읽기 오류:"+e.target.error.code); 
            return; 
        } 
         
        var encodelist = document.getElementById("encoding"); 
        var encoding = encodelist.options[encodelist.selectedIndex].value; 
         
        reader.readAsText(file, encoding); 
    } 
</script> 
</head> 
<body> 
    <h1>현재 기기 내의 파일 읽기</h1> 
    <input type="file" id="file"/> 
    <select id="encoding"> 
        <option>UTF-8</option> 
        <option>EUC-KR</option> 
    </select> 
    <button id="btnStart">읽기</button> 
     
    <br/> 
     
    <div> 
        <span id="filename">파일이름</span> 
        <span id="filesize">파일크기</span> 
    </div> 
     
    <textarea id="content" rows="10" cols="50" readonly="readonly"></textarea> 
</body> 
</html>

fileFormat.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    /* 이미지 형식이 어떻게 출력되는 지 보여주는 예제 */     
    window.onload = function() { 
        var input = document.querySelector('input[type="file"]'); 
        input.addEventListener("change", function(e) { 
            // FileList 객체 
            var files = e.target.files; 
            // 선택된 파일을 나타내는 file 객체 
            var file = files[0]; 
            if (!file) { 
                return; 
            } 
            show_image_format(file); 
        }, false); 
    } 
     
    function show_image_format(file) { 
        //alert("show_image_format") 
        var reader = new FileReader(); 
         
        // 바이너리 형식으로 파일 데이터 얻기 
        reader.readAsBinaryString(file); 
        // 파일 데이터 읽기가 성공했을 때의 처리 
        reader.onload = function() { 
            // 바이너리 데이터 
            var bin = reader.result; 
             
            // 앞부분 8바이트 얻기 
            var header = bin.slice(0, 8); 
            alert("header:"+header); 
            // 포맷을 판단(GIF, BMP, PNG, JPEG) 
            var fmt = ""; 
            if (header.match(/^GIF8[79]a/)) { 
                fmt = "GIF"; 
            } else if (header.match(/^BM/)) { 
                fmt = "BMP"; 
            } else if (header.match(/^\x89PNG\x0d\x0a\x1a\x0a/)) { 
                fmt = "PNG"; 
            } else if (header.match(/^\xff\xd8/)) { 
                fmt = "JPEG"; 
            } 
             
            // 포맷 표시 
            document.querySelector('#format').textContent = fmt; 
        } 
    } 
</script> 
</head> 
<body> 
    <p><input type="file"/></p> 
    포맷형식: 
    <div id="format">-</div> 
</body> 
</html>

fileMovieLoad.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    window.onload = function() { 
        var input = document.querySelector('input[type="file"]'); 
        input.addEventListener("change", function(e) { 
            // FileList 객체 
            var files = e.target.files; 
            // 선택된 파일을 나타내는 file 객체 
            var file = files[0]; 
            if (!file) { 
                return; 
            } 
             
            if (!file.type.match(/^video\/mp4$/)) { 
                alert("MP4 비디오 파일을 지정해 주세요."); 
            } 
             
            // 비디오 파일 읽기 시작 
            load_file(file); 
        }, false); 
    } 
     
    function load_file(file) { 
        var reader = new FileReader(); 
         
        // data url 형식으로 파일 데이터 읽기 
        reader.readAsDataURL(file); 
        // 파일 읽기의 진행률 표시 
        var span = document.querySelector('#state'); 
        var handler = window.setInterval(function() { 
            if (reader.readyState == reader.EMPTY) { 
                span.textContent = "대기중"; 
            } else if (reader.readyState == reader.LOADING) { 
                span.textContent = "로드중"; 
            } else if (reader.readyState == reader.DONE) { 
                span.textContent = "완료"; 
                // video 요소의 src 속성을 지정 
                var video = document.querySelector('video'); 
                video.src = reader.result; 
                video.load(); 
                 
                // 타이머 해제 
                window.clearInterval(handler); 
            } 
        }, 100); 
    } 
</script> 
</head> 
<body> 
    <p><input type="file"><span id="state">대기중</span></p> 
    <p><video width="480px" height="272px" controls="controls"></video></p> 
</body> 
</html>

fileProgress.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    window.onload = function() { 
        var input = document.querySelector('input[type="file"]'); 
        input.addEventListener("change", function(e) { 
            // FileList 객체 
            var files = e.target.files; 
            // 선택된 파일을 나타내는 file 객체 
            var file = files[0]; 
            if (!file) { 
                return; 
            } 
             
            var reader = new FileReader(); 
             
            // progress 이벤트 핸들러 지정 
            reader.onprogress = show_progress; 
             
            // load 이벤트 핸들러 지정 
            // loadend를 지정해야 완료된 후 100%가 표시된다. 
            reader.onloadend = show_progress; 
             
            // 바이너리 형식으로 파일 데이터 얻기 
            reader.readAsBinaryString(file); 
        }, false); 
    }; 
     
    function show_progress(e) { 
        document.querySelector('#total').textContent = e.total; 
        document.querySelector('#loaded').textContent = e.loaded; 
         
        var rate = (e.loaded*100/e.total).toFixed(1); 
        document.querySelector('#rate').textContent = rate; 
        document.querySelector('progress').value = rate; 
    } 
</script> 
</head> 
<body> 
    <p><input type="file"></p> 
    <p> 
        <progress value="0" max="100"></progress> 
        <span id="loaded">0</span> /  
        <span id="total">0</span> 바이트 
        (<span id="rate">0</span> %) 
    </p> 
</body> 
</html>

저작자표시

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

[HTML5/CSS3/JQUERY] selector (0)	2019.05.22
[HTML5/CSS3/JQUERY] web sql database (0)	2019.05.22
[HTML5/CSS3/JQUERY] geolocation, geolocation map (0)	2019.05.22
[HTML5/CSS3/JQUERY] web worker (1)	2019.05.22
[HTML5/CSS3/JQUERY] web storage (0)	2019.05.22

스터디 저장소

[HTML5/CSS3/JQUERY] file 접근

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

티스토리툴바

[HTML5/CSS3/JQUERY] file 접근

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

'Study/HTML5,CSS,JQuery' Related Articles

티스토리툴바