만능~ 프리뷰

카테고리 없음

만능~ 프리뷰

psys 2020. 6. 30. 11:26

728x90

<input type="file" id="id_select" value="">

input type file은 파일 업로드시 사용

보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가능

읽기는 사용자가 선택해주는 파일만 읽기 가능

    <script>
        var v_file = document.getElementById("id_select");
        function f_file() {
            // files는 file객체들을 가진 배열이라고 생각하면 좋음
            console.log(v_file.files[0].name);   // files 속성 눈으로 확인!
            var v_file = v_file.files[0];        // file객체는 뽑아냄
            var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
            v_fileReader.readAsText();          // 텍스트 파일을 읽어라
        }
    </script>

<프리뷰.html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
         읽기는 사용자가 선택해주는 파일만 읽기 가능!
    -->
    <input type=file id="id_select" value="" onchange="f_file()">
    <script>
        var v_file = document.getElementById("id_select");
        function f_file() {
            // files는 file객체들을 가진 배열이라고 생각하면 좋음
            console.log(v_file.files[0].name);   // files 속성 눈으로 확인!
            var v_file = v_file.files[0];        // file객체는 뽑아냄
            var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
            v_fileReader.readAsText();          // 텍스트 파일을 읽어라
        }
    </script>
</body>

</html>

<프리뷰.html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
         읽기는 사용자가 선택해주는 파일만 읽기 가능!
    -->
    <input type=file id="id_select" value="" onchange="f_file()">
    <script>
        var v_file = document.getElementById("id_select");
        function f_file() {
            // files는 file객체들을 가진 배열이라고 생각하면 좋음
            console.log(v_file.files[0].name);   // files 속성 눈으로 확인!
            var v_file2 = v_file.files[0];        // file객체는 뽑아냄
            var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
            v_fileReader.readAsText(v_file2);          // 텍스트 파일을 읽어라
            v_fileReader.onload = function(){
                // 다 읽고나면 result라는 속성에 그 값을 담아줌
                alert(v_fileReader.result);
            }
        }
    </script>
</body>

</html>

<텍스트파일.txt>

박성연 만만세
박성연 만만세
박성연 만만세

텍스트파일 읽기보다는 이미지 파일을 읽을때가 더 많다

            //v_fileReader.readAsText(v_file2);          // 텍스트 파일을 읽어라
            v_fileReader.readAsDataURL(v_file2);         // 이미지 파일읽기, 가장 많이 씀

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
         읽기는 사용자가 선택해주는 파일만 읽기 가능!
    -->
    <input type=file id="id_select" value="" onchange="f_file()">
    <script>
        var v_file = document.getElementById("id_select");
        function f_file() {
            // files는 file객체들을 가진 배열이라고 생각하면 좋음
            console.log(v_file.files[0].name);   // files 속성 눈으로 확인!
            var v_file2 = v_file.files[0];        // file객체는 뽑아냄
            var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
            //v_fileReader.readAsText(v_file2);          // 텍스트 파일을 읽어라
            v_fileReader.readAsDataURL(v_file2);         // 이미지 파일읽기, 가장 많이 씀
            v_fileReader.onload = function () {
                // 다 읽고나면 result라는 속성에 그 값을 담아줌
                alert(v_fileReader.result);
            }
        }
    </script>
</body>

</html>

alt는 사진 없을 때 사진 대신에 사용

    <img src="#" id="id_sajin" width="100" height="100" alt="이미지 있어?"><br>

이미지를 src속성에다 주기

                document.getElementById("id_sajin").src= v_fileReader.result;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
         읽기는 사용자가 선택해주는 파일만 읽기 가능!
    -->
    <img src="#" id="id_sajin" width="100" height="100" alt="이미지 있어?"><br>
    <input type=file id="id_select" value="" onchange="f_file()">
    <script>
        var v_file = document.getElementById("id_select");
        function f_file() {
            // files는 file객체들을 가진 배열이라고 생각하면 좋음
            console.log(v_file.files[0].name);   // files 속성 눈으로 확인!
            var v_file2 = v_file.files[0];        // file객체는 뽑아냄
            var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
            //v_fileReader.readAsText(v_file2);          // 텍스트 파일을 읽어라
            v_fileReader.readAsDataURL(v_file2);         // 이미지 파일읽기, 가장 많이 씀
            v_fileReader.onload = function () {
                // 다 읽고나면 result라는 속성에 그 값을 담아줌
                // alert(v_fileReader.result);
                document.getElementById("id_sajin").src= v_fileReader.result;
            }
        }
    </script>
</body>

</html>

내가 지정한 파일만 보여줌(사용자의 편의를 위함)

    <input type=file id="id_select" value="" accept=",jpg,.jpeg,.png,.gif" onchange="f_file()">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
         읽기는 사용자가 선택해주는 파일만 읽기 가능!
    -->
    <img src="#" id="id_sajin" width="100" height="100" alt="이미지 있어?"><br>
    <input type=file id="id_select" value="" accept=",jpg,.jpeg,.png,.gif" onchange="f_file()">
    <script>
        var v_file = document.getElementById("id_select");
        function f_file() {
            // files는 file객체들을 가진 배열이라고 생각하면 좋음
            console.log(v_file.files[0].name);   // files 속성 눈으로 확인!
            var v_file2 = v_file.files[0];        // file객체는 뽑아냄
            var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
            //v_fileReader.readAsText(v_file2);          // 텍스트 파일을 읽어라
            v_fileReader.readAsDataURL(v_file2);         // 이미지 파일읽기, 가장 많이 씀
            v_fileReader.onload = function () {
                // 다 읽고나면 result라는 속성에 그 값을 담아줌
                // alert(v_fileReader.result);
                document.getElementById("id_sajin").src= v_fileReader.result;
            }
        }
    </script>
</body>

</html>