HTML, CSS/Function implementation
[Visual Studio Code] input type="file"
zenghyun
2023. 1. 5. 15:29
input type="file"에 대해 알아보자
code
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>이미지 미리보기</h1>
<div class="form-container">
<input type="file" id="image">
<input type="file" id="image" multiple>
<input type="file" id="image" accept="image/*" multiple>
<input type="file" id="image" accept="text/*" multiple>
</div>
</body>
</html>
1. <input type= "file">
type을 file로 할 경우
파일을 선택할 수 있는 버튼이 생기고 원하는 파일을 넣을 수 있다. ( 단, 다중 선택 불가 )
파일을 선택해서 넣으면
파일 이름을 보여준다.
2. <input type= "file" mutiple>
type을 file로 하고 mutiple 속성을 지정하면 한 번에 여러 파일을 선택해서 넣을 수 있다.
3. <input type= "file" accept = "image/*" mutiple>
accept 속성을 지정하면 내가 지정한 파일 형식만 올릴 수 있다.
위와 같이 "image/*"라고 지정하면 이미지 파일만 업로드 가능하고, 파일 형식은 상관없다는 뜻이다.
이렇게 파일 형식이 자동으로 지정되어 있다. 하지만 모든 파일로 바꾸면 accept 속성을 지정해도 올라간다는 단점이 있다.
4. <input type= "file" accept = "text/*" mutiple>
accept 속성은 image뿐만 아니라 다른 것도 가능하다.
