WhyPy_FrontEnd/join.html at main · Py-Sun/WhyPy_FrontEnd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../static/css/join.css">
    <title>join</title>
</head>

<body>
    <div class="main">
        <div class="title">회원가입</div>
        <div class="email">*이메일</div>
        <input type="text" class="box">
        <div class="name">*아이디</div>
        <input type="text" class="box">
        <div class="password">*비밀번호</div>
        <input type="text" class="box">
        <div class="password1">*비밀번호 확인</div>
        <input type="text" class="box">
        <div class="nic">*닉네임</div>
        <input type="text" class="box">
        <div class="profile">*프로필 이미지</div>
        <br>
        <div class="container">
            <input type="text" class="upload-name" value="이미지를 업로드 하세요" placeholder="이미지를 업로드 하세요" disabled>
            <label for="upload-file">파일선택</label>
            <input type="file" id="upload-file">
        </div>
        <div class="submit">
            <input type="submit" class="sub" value="가입하기">
        </div>
</body>
<script>
    window.addEventListener('load', function () {
        const upload_file = document.querySelector("#upload-file");
        const upload_name = document.querySelector(".upload-name");

        upload_file.addEventListener('input', () => {
            if (isImage(upload_file.files[0])) {
                changeVal(upload_name, (upload_file.files[0].name));
            }
        });

        function isImage(file) {
            return file.type.indexOf('image') >= 0;
        }
        function changeVal(class_name, change_name) {
            class_name.value = change_name;
        }
    });
</script>


</html>