파일 업로드 / 속성값(jquery)

파일 업로드 / 속성값(jquery)HTML+CSS+JS+Flask/파일 업로드 기능2022. 5. 9. 11:48@덕구공

Table of Contents

파일 업로드

파일을 업로드하려면 input 태그에 type 속성을 file로 설정해서 사용할 수 있다!

<input type="file">

또한 이미지만 업로드 하는 경우는 accept 속성을 image/*와 같이 설정하면 된다.

<input type="file" accept="image/*">

만약 image 파일에서 png 확장자만 선택하고 싶다면 accept 속성에 image/png와 같이 설정하면 된다.

<input type="file" accept="image/png">

속성값 (files)

선택자나 jquery를 이용해서 file input 요소에 접근한 후에 files라는 속성값을 이용해서 파일의 객체를 확인할 수 있다!
여기서는 jquery를 사용해서 해당 파일 객체를 확인하는 방법을 알아보자
아래와 같이 jquery를 임포트하고 file input에 id 값을 주자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fileuploader</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" accept="image/png" id="file">
</body>
</html>