Appia의 IT세상

[초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input) 본문

Programming/HTML&CSS

[초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input)

Appia 2020. 8. 13. 07:23
반응형

[초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input)

 

웹에서 종종 파일을 업로드 하는 경우가 많습니다. 그럴 경우, 프로그래밍에서 사용하는 파일 다이어로그(file dialog)와 같은 부분들이 요구 됩니다. 실제, 파이썬등에서는 관련해서 관련 모듈을 바탕으로 사용됩니다. 물론 HTML에서도 관련하여 방법들을 제공하고 있습니다. 따라서, 이번 포스팅은 파일을 업로드 할 수 있는 파일 업로드 박스를 만들기로 해보겠습니다. 

파일 업로드 박스

파일 업로드 박스(upload box)도 앞선 포스팅들과 유사하게 input 태그에서 type을 변경함으로 사용합니다. 그럼 다음 코드를 한번 살펴보겠습니다. 

<!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>
   <form>
      <input type = "file" name = "fileupload" accept = "image/*" />
   </form>
</body>
</html>
cs

위의 코드의 html을 실행하면 위와 같은 화면이 나타나고, 이를 바탕으로 파일을 경로들을 업로드 할 수 있습니다. 그럼 위의 화면에서 Choose File을 클릭하면 다음과 같은 화면이 나타납니다. 

Choose File 클릭시 화면

여기에서 파일을 선택할 수 있게 제공합니다. 만약 제가 위의 화면에서 파일을 하나 선택했다면, 화면에는 어떻게 표시 될까요? 다음과 같은 형태로 표시가 됩니다. 

Choose file 클릭으로 파일 선택

그럼 위의 각 속성에 대해서 한번 살펴보겠습니다. 

속성 속성 설명
type input 태그의 타입 결정/upload box의 경우, file 사용 
name 서버 등에서 각 객체를 불러올 때, 참조할 수 있는 이름
accept 서버가 수용할 수 있는 파일 타입

위와 같은 속성을 바탕으로 작업을 진행하게 됩니다. 

 

조금 여담이지만, 이 부분을 바탕으로, 웹을 이용한 DBC 파일 분석기를 나중에 생성해볼 예정입니다. 물론 이 부분들에 대해서 제 스스로 혼자 심심해서 공부 하면서 올리는 부분이라 마음껏 활용하셔도 됩니다. 

 

이번 포스팅은 [초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input)라는 주제로 간단히 업로드 박스를 만들어봤습니다. 보시는 분들에게 도움이 되셨다면 좋겠습니다. 감사합니다. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

Sublime Text 기본 템플릿 사용하기  (0) 2021.09.06
[초보HTML배우기 17]HTML - 버튼(button)만들기(input)  (0) 2020.08.16
[초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select)  (1) 2020.08.10
[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input)  (0) 2020.08.07
[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)  (0) 2020.08.04
'Programming/HTML&CSS' Related Articles more
Comments