Twitter 부트 스트랩 양식 파일 요소 업로드 버튼

질문 : Twitter 부트 스트랩 양식 파일 요소 업로드 버튼

---

트위터 부트 스트랩을위한 멋진 파일 요소 업로드 버튼이없는 이유는 무엇입니까? 업로드 버튼에 파란색 기본 버튼이 구현되어 있으면 좋을 것입니다. CSS를 사용하여 업로드 버튼을 미세 조정할 수도 있습니까? (조작 할 수없는 기본 브라우저 요소처럼 보임)

답변

---

다음은 Bootstrap 3 및 4에 대한 솔루션입니다.

버튼처럼 보이는 기능적 파일 입력 컨트롤을 만들려면 HTML 만 필요합니다.

HTML

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

이것은 IE9 +를 포함한 모든 최신 브라우저에서 작동합니다. 이전 IE에 대한 지원도 필요하면 아래 표시된 기존 방식을 사용하십시오.

이 기술은 HTML5 hidden 속성에 의존합니다. Bootstrap 4는 다음 CSS를 사용하여 지원되지 않는 브라우저에서이 기능을 shim합니다. Bootstrap 3을 사용하는 경우 추가해야 할 수 있습니다.

[hidden] {
  display: none !important;
}

IE8 이하에 대한 지원이 필요한 경우 다음 HTML / CSS를 사용하세요.

HTML

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

<label> 을 클릭 할 때 파일 입력을 트리거하지 않으므로 CSS "bloat"는이 문제를 해결하기 위해 몇 가지 작업을 수행합니다.

• 파일 입력이 주변 <span>의 전체 너비 / 높이에 <span>
• 파일 입력을 보이지 않게합니다.

이 방법에 대한 자세한 내용과 선택한 파일 / 수를 사용자에게 표시하는 방법에 대한 예제를 게시했습니다.

https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

출처 : https://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button