반응형
목차.
도입
- 시작해 봅시다!
- HTML 코드
- CSS 코드
- JavaScript 코드
- jQuery 코드
- 작동 방식!
- 전체 코드
도입
최근에 저는 프로젝트를 하고 있었습니다. 요구 사항 중 하나가 맞춤형 파일 업로드 버튼을 만드는 것이었다. 이런 걸 만들어야 했어요
구글에서 조금만 검색하면 자세한 튜토리얼을 쉽게 찾을 수 있을 것 같았는데 아쉽게도 찾지 못했어요. 간단해 보이지만 만들기 위해 많은 시간을 들여야 했어요.
이 문서는 만드는 방법에 대한 자세한 튜토리얼입니다. :)
시작해 봅시다!
초보자 친화적인 기사를 쓰겠습니다. 우선 기초부터 시작하죠. HTML 파일을 만들고 인덱스라는 이름을 지정했습니다. 아무 이름이나 지정할 수 있습니다. 이제 .css 파일을 생성합니다. 컨벤션을 따라 style.css라고 이름 지었습니다. HTML과 CSS는 끝났으니 이제 .js 파일을 만들자. 다시 집중도를 따라 script.js라고 이름 지었습니다.
이제 HTML 파일에 < !DOTPE html >, < 헤드 >, < 본문 > 등과 같은 주요 태그를 설정하세요. 그러면 우리의 CSS와 js 파일을 HTML 파일로 연결하겠습니다. 제 경험상 일찍 하는 것이 더 낫기 때문에 일찍 하는 것입니다. 나중에 연결하는 것을 잊어버리고 몇 시간 동안 코드가 작동하지 않는 이유를 파악할 수 있습니다️
.css 및 .js 파일 연결
css 파일에 연결하기 위해 HTML 파일의 < head > 태그에 다음 줄을 추가한다. .css, .html 및 .js 파일이 모두 동일한 폴더에 있는지 확인합니다.
<link rel="stylesheet" href="style.css">파일 찾아보기 버튼에 아이콘도 추가하겠습니다. 폰타썸으로 할게요. 그러기 위해서는, 우리는 그것을 연결해야 합니다. 따라서,태그에도 다음 링크를 추가하세요.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">이제 거기에도 jQuery를 뿌릴거야. 다음 사항도 추가하세요.
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'> </script> 마지막으로, 이것은 당신의태그의 모습입니다.
<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>File Upload Button</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'> </script>
</head>< 본문 > 태그가 닫히기 직전에 다음 줄을 추가하여 .js 파일을 연결하십시오.
```js
<script src="script.js"></script>
```
## HTML 코드
우리 같이 놀면서 수업도 듣고 놀까요?
<div class="content-ad"></div>
먼저, 당신의 모든 컨텐츠가 들어갈 주요 부분을 만드세요. 그럼 스타일링하기 쉽도록 클래스를 추가해 주세요.
```js
<div class="up">
<!-- Code here -->
</div>
```
지금부터, 저는 그들의 클래스 이름과 함께 divs를 언급하기 시작하겠습니다.
이제, 우리는 "위쪽" div 안에 2개의 div를 더 만들어야 합니다.
하나는 선택한 파일의 이름이 표시되는 위치입니다. 두 번째 div는 browse file 버튼을 위한 것입니다.
<div class="content-ad"></div>
자, 첫 번째 점을 보시죠.
```js
<div class="fileName">
<a>NO FILE SELECTED</a>
</div>
```
< a >의 텍스트가 표시되는 기본 텍스트입니다. 파일을 선택하면 파일 이름이 이 기본 텍스트 대신 표시됩니다(Js 및 jQuery의 용도).
두 번째 칸은 다음과 같습니다.
```js
<div class="file-search-button">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-search"></i> BROWSE FOR A FILE
</label>
<input id="file-upload" type="file"/>
</div>
```
<div class="content-ad"></div>
< 라벨 > 태그는 < 입력 >에 대한 것이다. < 입력 >에 "file-upload"라는 ID를 부여했습니다. 그리고 이 아이디를 사용하여 라벨이 이 입력 전용임을 명시했습니다. 이것은 하나의 <div> 안에 <입력 >와 < 라벨 > 태그가 많이 있을 때 혼란을 피할 수 있는 좋은 방법이다. < input > 태그에서, 우리는 이 버튼이 모든 종류의 파일(예: .png, .fng, .exe, .pdf 등)을 업로드하는 데 사용될 수 있도록 지정하기 위해 type="file"을 추가했다.
" < i class="fa fa-search" > < /i >, 이것을 추가함으로써, "search"를 나타내는 아이콘이 우리의 텍스트 앞에 추가될 것이다.
모든 것을 종합하면 다음과 같은 결과를 얻을 수 있습니다.
```js
<body>
<div class="up">
<div class="fileName">
<a>NO FILE SELECTED</a>
</div>
<div class="file-search-button">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-search"></i> BROWSE FOR A FILE
</label>
<input id="file-upload" type="file"/>
</div>
</div>
<script src="script.js"></script>
</body>
```
자, 이 시점에서 상황은 다음과 같습니다.
<div class="content-ad"></div>
## CSS 코드
꽤 무난해 보이니까 이렇게 하자 :)
style.css 파일에 다음 코드를 모두 추가합니다.
우선 메인 디브인 "위쪽"으로 스타일링을 하겠습니다. 페이지 가운데에 배치하고 싶은 작업은 다음과 같습니다.
<div class="content-ad"></div>
```js
.up{
margin: 0 auto;
text-align: center ;
margin-top: 200px;
}
```
자, 여기 정말 중요한 것이 있습니다. 보세요:
빨간색 원의 텍스트는 기본적으로 표시됩니다. 이것은 일반적으로 스타일링 할 수 없습니다. 적어도 난 할 수 없었어. 위치를 바꿀 수가 없었고 예쁜 버튼 옆에 있으니 정말 안 좋아 보였어요.
나는 초록색 동그라미 안에 있는 글만 보여주길 원했어요. 이 텍스트는 나중에 선택한 파일의 이름으로 바뀝니다.
<div class="content-ad"></div>
따라서 빨간색으로 표시된 텍스트를 없애기 위해 다음을 수행합니다.
```js
input[type="file"] {
display: none;
}
```
이 작업을 마쳤으니 첫 번째 div인 "fileName"의 스타일을 지정해 보겠습니다.
```js
.fileName{
margin-top: 20px;
color: rgb(255, 255, 255);
display: inline-block;
padding:15px;
border-radius: 25px;
cursor: pointer;
background-color: #737275;
border: none;
width: 220px;
}
```
여기 파일 찾아보기 버튼과 모양과 스타일이 조금 비슷해 보이도록 패딩과 색상 등을 추가했습니다.
<div class="content-ad"></div>
첫 번째와 두 번째 div 사이에 공간이 있는지 확인하기 위해 다음을 수행합니다.
```js
.file-search-button{
margin-top: 30px;
}
```
이제 파일 찾아보기 단추의 스타일을 지정합니다.
```js
.custom-file-upload {
color: rgb(255, 255, 255);
display: inline-block;
padding:15px;
border-radius: 25px;
cursor: pointer;
background-color: #7a166d;
border: none;
}
```
이 스타일링은 아주 기본적인 것들이었어요. 현재 상황은 다음과 같습니다.
<div class="content-ad"></div>
페이지 중간에 있는데 아까 했던 기본 스타일링 덕분에 많이 좋아졌어요 :)
## JavaScript 코드
script.js 파일에 다음 코드를 추가합니다.
```js
button.addEventListener('click', (e) => {
e.preventDefault();
$wrapper.classList.toggle('toggled');
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
```
<div class="content-ad"></div>
사실 꽤 간단합니다. 버튼을 클릭하자마자 아래 정의된 함수가 호출되도록 이벤트 수신기를 추가합니다. 버튼을 클릭하자마자 사용자에게 파일을 선택할 수 있는 옵션이 제공됩니다. 파일을 선택하지 않으면 변경사항이 발생하지 않습니다. 그러나 파일을 선택하면 이름이 변수에 저장됩니다.
jQuery가 마법을 부리고 나면 왜 이것이 추가되었는지 이해할 수 있을 것입니다.
## jQuery 코드
div를 닫은 후 다음을 추가합니다.
```js
<script>
$(".file-search-button").ready(function(){
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$(".fileName").html(fileName);
});
});
</script>
```
<div class="content-ad"></div>
함수 실행이 완료되면 파일 이름이 vairable 안에 저장된다는 것을 이전부터 알고 있었습니다.
따라서 이 코드는 기본 텍스트를 선택한 파일의 이름으로 바꾸는 데 사용됩니다.
## 작동 방식!
행동으로 보자;)
이것이 우리의 버튼입니다.
<div class="content-ad"></div>
파일 찾아보기 버튼을 클릭하면 이 새로운 창이 뜹니다. 지금 파일을 선택하십시오.
이제 효과가 있다는 것을 알 수 있습니다
<div class="content-ad"></div>
## 전체 코드
읽으면서 따라가든지 아니면 내 깃허브에서 전체 코드를 받아가든지.
링크는 다음과 같습니다.
https://github.com/AyeshaSahar/Web-Development/tree/main/Custom%20File%20Upload%20Button
연결합시다!
<div class="content-ad"></div>
트위터
깃허브'css' 카테고리의 다른 글
| CSS Funstuff: 애니메이션 파형 (0) | 2022.01.27 |
|---|---|
| CSS용 Flexbox Froggy(플렉스박스를 배우는 재미있는 방법) (0) | 2022.01.27 |
| 전환이 있는 간단한 CSS 카드 구축 (0) | 2022.01.27 |
| html css 와 typescript 를 사용하여 안드로이드 게임을 만들었다. (0) | 2022.01.27 |
| 가장 작은 스타일시트 (0) | 2022.01.27 |
댓글