비전공자 개발일기

Custome Upload File 본문

HTML _CSS

Custome Upload File

HiroDaegu 2023. 2. 11. 00:08
728x90
SMALL

<!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>CUSTOME FILE UPLOAD</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>

<body>
    <div class="file-upload">
        <input class="file-upload__input" type="file" name="myFile[]" id="myFile" multiple>
        <button class="file-upload__button" type="button">Choose File(s)</button>
        <span class="file-upload__label"></span>
    </div>
</body>

</html>
body{
    background: no-repeat center url("https://i.postimg.cc/VLTVtKwp/image.jpg");
    background-size: cover;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .file-upload {
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 15px;
  }
  
  .file-upload__input {
    display: none;
  }
  
  .file-upload__button {
    -webkit-appearance: none;
    background: #009879;
    border: 2px solid #00745D;
    border-radius: 4px;
    outline: none;
    padding: 0.5em 0.8em;
    margin-right: 15px;
    color: #FFF;
    font-size: 1em;
    font-family: "Quicksand", sans-serif;
    font-weight: bold;
    cursor: pointer;
  }
  
  .file-upload__button:active {
    background: #00745D;
  }
  
  .file-upload__label {
    max-width: 250px;
    font-size: 0.95em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Quicksand", sans-serif;
  }
Array.prototype.forEach.call(
  document.querySelectorAll(".file-upload__button"),
  function (button) {
    const hiddenInput = button.parentElement.querySelector(
      ".file-upload__input"
    );
    const label = button.parentElement.querySelector(".file-upload__label");
    const defaultLabelText = "No file(s) selected";

    // Set default text for label
    label.textContent = defaultLabelText;
    label.title = defaultLabelText;

    button.addEventListener("click", function () {
      hiddenInput.click();
    });

    hiddenInput.addEventListener("change", function () {
      const filenameList = Array.prototype.map.call(
        hiddenInput.files,
        function (file) {
          return file.name;
        }
      );

      label.textContent = filenameList.join(", ") || defaultLabelText;
      label.title = label.textContent;
    });
  }
);
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Simple 404 page  (0) 2023.02.13
Animated Gaming Website  (0) 2023.02.12
Neon Love  (0) 2023.02.10
Confetti Text Effect  (0) 2023.02.09
Send Button Animation  (0) 2023.02.08
'HTML _CSS' Related Articles more