HTML 파일 업로드 기능은 정말 잘 작동하지만 끔찍해 보입니다. 의미론적이고 접근 가능한 방식으로 수정해 보겠습니다.

문제

파일 입력 상태가 좋지 않습니다.

이것을 확인하십시오. 전혀 스타일을 지정하지 않았습니다. 이것은 Firefox의 파일 입력에 대한 기본 스타일입니다.

명확 하게 하기 위해 이 입력을 페이지에 추가하는 코드는 입니다 <input type="file">.

물론 지금은 항상 시각적인 것보다 기능이 우선시되어야 한다고 주장하겠지만, 이 입력의 기능을 잃지 않고 스타일을 지정하기 위해 우리가 할 수 있는 일이 있어야 합니다.

CSS 스타일

불행히도 이것은 짧은 섹션입니다.

입력 스타일을 지정하는 데 사용할 수 있는 속성은 실제로 많지 않습니다. 물론 background-color새로운 것을 추가하거나 제공할 수는 font-family있지만 '찾아보기...' 버튼의 스타일을 지정하는 방법조차 없습니다.

그래서 지금은?

일반적으로 브라우저 기본 요소를 사용하면 추가 작업 없이 접근성을 제공할 수 있습니다. 그렇다면 이 입력을 페이지에 유지하면서 다른 항목의 스타일을 지정하려면 어떻게 해야 할까요?

라벨.

이 label요소는 스타일링을 위해 s 대신 사용된 오랜 역사를 가지고 있습니다 input. 다음은 몇 가지 마크업입니다.

<label class="file-upload">
  <span class="file-upload__text">
    Click or Drag file here...
  </span>
  <input type="file" class="file-upload__input">
</label>

이제 마크업이 있으므로 입력에 약간의 스타일을 지정해 보겠습니다.

.file-upload {
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: hsl(317, 20%, 80%);
  border: 5px dashed hsl(317, 20%, 60%);
  border-radius: 20px;
  position: relative;
  transition: 0.2s ease all;
// Align all children to the center of the container
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.file-upload:hover {
  background-color: hsl(317, 20%, 90%);
}
.file-upload:focus,
.file-upload:focus-within {
  outline: 5px solid hsl(317, 20%, 60%);
  outline-offset: 5px;
}
.file-upload__text {
  font-size: 2em;
  font-family: sans-serif;
}
.file-upload__input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
// Temporary Styles 
  background-color: lightblue;
}

labelour 는 our 에 묶여 있기 때문에 input우리의 의지를 클릭하는 것처럼 작동합니다 input. 이제 시각적으로 숨기기만 하면 됩니다 input.

스타일을 업데이트하여 를 .file-upload__input제거 background-color하고 을 추가 opacity하면 파일 입력을 페이지에 유지하면서 시각적으로 숨길 수 있어 접근성 및 기본 브라우저 동작(예: 클릭 및 끌기)을 유지할 수 있습니다.

.file-upload__input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
// New Styles
  opacity: 0;
}

      
                

                    
                    
                
            

파일 입력의 기본 동작 중 하나는 선택한 파일 이름을 표시하는 것입니다. 불행하게도 약간의 Javascript 없이는 이 정보를 표시할 수 있는 방법이 없습니다. 아래에 추가하려는 기능을 기록해 보겠습니다.

1. 선택된 파일이 없을 때 사용자에게 알림
2. 파일 선택 시 사용자 파일 이름 표시

<input type="file" class="file-upload__input" id="FileUploadInput">

<span class="file-upload__file-name" id="FileUploadFileName">No file selected</span>

<label class="file-upload">
  <span class="file-upload__text">
    Click or Drag file here...
  </span>
  <span role="presentation" class="file-upload__file-name" id="FileUploadFileName">
    No file selected
  </span>
  <input type="file" class="file-upload__input" id="FileUploadInput">
</label>

var fileInput = document.querySelector("#FileUploadInput");
var fileName = document.querySelector("#FileUploadFileName");

fileInput.addEventListener("change", function () {
  fileName.innerText = fileInput.value.split("\\").pop();
});

var fileInput = document.querySelector("#FileUploadInput");
var fileName = document.querySelector("#FileUploadFileName");
fileInput.addEventListener("change", function () {
  fileName.innerText = fileInput.value.split("\\").pop();
});

몇 줄의 Javascript를 추가하여 어떤 파일이 업로드되었는지에 대한 시각적 피드백을 사용자에게 제공할 수 있습니다. 더 좋은 점은 코드의 기본 기능과 접근성을 손상시키지 않고 이 모든 작업을 수행할 수 있다는 것입니다!

우리가 사용할 수 있는 HTML 요소를 활용하고, CSS를 사용하여 사용자에게 더 나은 시각적 경험을 제공할 수 있는 방식으로 스타일을 지정하고, 공백을 채우기 위해 Javascript에만 의존함으로써 파일 업로드를 구축했습니다. 최소한의 유지 관리가 필요하고 브라우저 기본 기능에 의존해야 합니다.

꽤 괜찮은데!