HTML, CSS 및 JavaScript로 사용자 정의 파일 업로드 버튼을 만드는 방법

소개

Recently, I was working on a project. One of the requirements was to create a customized file upload button. I had to make something like this:

구글에서 조금만 검색하면 자세한 튜토리얼을 쉽게 찾을 수 있을 거라 생각했는데 아쉽게도 없었습니다. 아주 간단한 것 같지만 만드는 데 많은 시간을 할애해야 했습니다.

이 기사는 그것을 만드는 방법에 대한 자세한 자습서입니다 :)

시작하자!

I'm gonna make this a beginner-friendly article, so, first of all, let's start with the basics. Create an HTML file, I've named it Index, you can name it anything. Now create a .css file. I've named it style.css following the convention. Since we're done with the HTML and CSS ones, let's make a .js file now. I've named it script.js, again, following the concention.

Now, set up your main tags such as < !DOCTYPE html >, < head >, < body > etc in your HTML file. Then we will connect our CSS and js file with the HTML file. I'm doing this early on because my experience states that it's better to be early. You might forget to make the connection later and spend hours trying to why your code isn't working🤦‍♀️

.css 및 .js 파일 연결

Add the following line in the < head > tag of your HTML file to connect with the css file. Make sure that the .css, .html and .js files are all in the same folder.

<link rel="stylesheet" href="style.css">

I'm also gonna add an icon on the browse for a file button. I'll use fontawesome for it. To do so, we gotta connect it. So, add the following link in the < head > tag as well.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Finally, this is what your < head > tag should look like:

<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">
</head>

Just before < body > tag is closed, add this line to connect the .js file:

<script src="script.js"></script>

HTML 코드

Let's play with some divs and classes, shall we?👀

First, make the main div under which all your content will be. Then add a class to it so that styling it is much easier.

<div class="up">

                    <!-- Code here -->

</div>

From here onwards, I'll start to refer to the divs with their class name.

Now, we have to make 2 more divs inside the "up" div.

One would be where the name of the selected file would be shown. The second div would be for the browse file button.

So, here's the first div:

<div class="fileName">
          <a>NO FILE SELECTED</a>
        </div>

The text in < a > would be the default text shown. Once the file is selected, its name would be shown in place of this default text (this is what we would use Js and jQuery for).

Here's the second 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>

The < label > tag is for the < input >. We gave the id "file-upload" to the < input >. Then, via using this id, we specified that the label was for this input only. This is a good practice and avoids confusion when you got a lot of < input > and < label > tags inside one < div >. In the < input > tag, we added type="file" to specify that this button can be used to upload anything (any kind of file like.png, .jpeg, .exe, .pdf etc).

" < i class="fa fa-search" >< /i >", by adding this, an icon indicating "search" would be added before our text.

Adding everything up, here's what we will get:

<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>

So, this is how things look at this point:

CSS 코드

It looks quite plain, so let's style this :)

Add all the following code in the style.css file.

First of all, we will style the main div, "up". I want to place it in the center of the page so here's what I'll do:

.up{
    margin: 0 auto;
    text-align: center ;
    margin-top: 200px;
  }

So, here is something really important. Take a look:

빨간색 원 안의 텍스트는 기본적으로 표시되는 내용입니다. 일반적으로 스타일을 지정할 수 없습니다. 적어도 나는 그것을 할 수 없었다. 위치를 변경할 수 없었고 아름다운 버튼 바로 옆에 정말 나빠 보였습니다.

녹색 원 안의 텍스트만 표시되기를 원했습니다. 해당 텍스트는 나중에 선택한 파일의 이름으로 대체됩니다.

따라서 빨간색 텍스트를 사라지게 하려면 다음을 수행합니다.

  input[type="file"] {
    display: none;
  }

이 작업이 완료되었으므로 첫 번째 div인 "fileName"의 스타일을 지정하겠습니다.

  .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 사이에 약간의 공간이 있는지 확인하기 위해 다음을 수행합니다.

 .file-search-button{
    margin-top: 30px;
  }

이제 파일 찾아보기 버튼의 스타일을 지정합니다.

  .custom-file-upload {
    color: rgb(255, 255, 255);
    display: inline-block;
    padding:15px;
    border-radius: 25px;
    cursor: pointer;
    background-color: #7a166d;
    border: none;
  }

이 스타일링은 꽤 기본적인 것들입니다. 현재 모습은 다음과 같습니다.

페이지 중앙에 있으며 이전에 했던 기본 스타일링으로 지금은 훨씬 보기 좋습니다 :)

자바스크립트 코드

Add the following code in the script.js file.

const fileName = document.querySelector(".fileName");

const fileInput = document.querySelector("input[type=file]");
fileInput.addEventListener("change", function() {
    if (this.files && this.files[0]) {
        fileName.innerHTML = this.files[0].name;
    }
});

It's pretty simple actually. We will first select the "query" via its class. Then we add an event listener that as soon as the button is clicked, the below-defined function would be called. What it does is that as soon as the button is clicked, the user is given the option to select a file. If no file is selected, no change would take place. But if a file is selected, the name would be stored in a variable and replace the default text!

작동 방식!

Let's see it in action ;)

This is our button:

파일 찾아보기 버튼을 클릭하면 이 새 창이 나타납니다. 지금 파일을 선택하십시오.

그리고 여기서 우리는 그것이 작동하는 것을 볼 수 있습니다.

전체 코드

You can either follow along while reading or get the full code from my Github.

Here's the link:

https://github.com/AyeshaSahar/Web-Development/tree/main/Custom%20File%20Upload%20Button

연결하자!

✨

✨ Github

Reference

이 문제에 관하여(HTML, CSS 및 JavaScript로 사용자 정의 파일 업로드 버튼을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/iayeshasahar/how-to-make-a-custom-file-upload-button-with-html-css-and-javascript-44ji

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)