9 사용자 정의 오픈 소스 파일 업로드 필드 스니펫

UI 키트에서 고급 jQuery 플러그인에 이르기까지 웹 양식을 개선하기 위한 놀라운 도구를 찾을 수 있습니다.

그러나 편집하기 가장 어려운 입력 필드 중 하나는 업로드 필드입니다. 이것은 기본 HTML 입력 요소이며 사용자가 컴퓨터에서 파일을 업로드할 수 있도록 합니다. 업로드 필드의 스타일을 변경하는 것은 다른 양식 요소에 비해 엄청난 도전입니다.

업로드 입력을 사용자 정의하려는 경우 이 갤러리가 도움이 될 것입니다. CodePen에서 원하는 대로 필드 스타일을 변경할 수 있음을 증명하는 9개의 수제 업로드 필드를 수집했습니다.

1. 플랫 파일 업로드

개발자 Wallace Erick은 약간의 CSS와 JavaScript로 이 플랫 업로드 필드를 만들었습니다. 단색에 집중하여 그라데이션을 피하는 플랫 디자인의 추세를 차용합니다. 종종 단색 색상 구성표를 사용합니다.

이 파일 업로드 디자인을 모든 페이지에 추가하고 멋지게 보이게 할 수 있습니다. 색상 구성표를 변경하고 양식 내에서 적절하게 배치하기만 하면 됩니다.

예상대로 작동하며 표준 HTML 입력 요소에서 실행됩니다. 따라서 이것은 이전 브라우저에서도 사용할 수 있으며 모바일에서도 작동해야 합니다.

2. 커스텀 파일 업로드

다음은 업로드 필드로 좀 더 추상적인 디자인입니다. 개발자 Aaron Vanston은 더 큰 웹사이트에서 볼 수 있는 파일의 복제본으로 이 파일 업로드를 만들었습니다.

Dropbox, Google+ 및 Facebook과 같은 대형 기술 사이트를 생각해 보십시오. 그들은 종종 업로드 창을 시작하기 위해 큰 "여기를 클릭하십시오" 공간이 있는 끌어서 놓기 영역이 있습니다. 이것이 바로 Aaron이 이 스니펫으로 한 일입니다.

작동하려면 jQuery와 상당한 양의 JS/CSS에 의존합니다. 표준 HTML 입력 필드를 사용하는 동안 사용자 정의 JS 기능으로 업로드 프로세스도 처리합니다.

JavaScript에 대해 알고 있다면 이것은 자신의 파일 업로드 UI를 구축하기 위한 편리한 템플릿으로 작동할 수 있습니다.

3. 반응형 애니메이션 업로더

현대적인 웹 디자인을 하고 있다면 반응형으로 가야 한다는 것을 알고 있습니다. 모바일 사용자는 이와 동일한 양식을 통해 웹에 파일을 업로드할 수 있으므로 반응형 입력 필드를 활용하는 것이 좋습니다.

모바일 친화적인 고품질 업로드 필드의 예를 보려면 이 디자인을 살펴보세요. 드래그 앤 드롭을 지원하는 작은 정사각형 업로드 공간이 있는 매우 기본적입니다.

이것은 입력 요소를 사용 하지 않는다는 점에 유의하십시오. 따라서 업로드를 위해 클릭할 방법이 없습니다. 나는 그것이 사용성의 악몽이라고 생각하지만 이것은 또한 테스트에 사용되는 샘플 스니펫일 뿐입니다. 따라서 완벽한 사용성을 위한 것은 아닙니다.

이 스니펫을 사이트로 가져오는 경우 끌어서 놓기 영역 옆에 일반적인 업로드 필드를 추가하는 것이 좋습니다.

4. 커스텀 업로더

일일 개발 프로젝트는 기술을 연마하는 좋은 방법입니다. Drew Vosburg는 이 접근 방식을 따라 CodePen에서 무료로 호스팅되는 달콤한 업로드 양식을 구축했습니다.

끌어서 놓기 효과를 처리하는 JavaScript 기능으로 크게 사용자 정의되었습니다. 그러나 이 입력 필드는 실제로 드래그 앤 드롭과 함께 터치와 클릭을 모두 지원하도록 구축되었습니다.

클릭 가능한 영역은 CSS로 스타일이 지정된 HTML 레이블입니다. 해당 레이블 요소는 페이지에서 숨겨져 있는 입력 필드에 연결됩니다. 클릭 가능한 필드처럼 작동합니다. 확실히 똑똑한 아이디어이며 부팅하는 데 완전히 의미가 있습니다.

5. 스톡 사진 업로드 인터페이스

다음은 CodePen에서 본 가장 복잡하지만 인상적인 스니펫 중 하나입니다. 컴퓨터에서 바로 갤러리에 사진을 업로드할 수 있습니다. 업로드하는 각 사진과 함께 페이지에서 바로 미리보기가 표시됩니다.

JavaScript를 통해 이미지를 가져온 다음 CSS에 포함하기 위해 base64로 변환하여 작동합니다.

이미지를 서버에 업로드할 때마다 임시 파일이 생성됩니다. 자신의 서버에서 이 임시 파일을 사용하여 그림을 표시할 수 있습니다. 그러나 이제 CSS가 base64를 지원하므로 이것이 또 다른 대안입니다.

인터페이스가 매우 깨끗하고 업로드 기능이 잘 어울립니다.

6. 심플 블루 업로드 UI

JS가 없는 업로드 필드를 찾고 있다면 Stephen Baker가 만든 이 예제를 살펴보십시오.

순수한 CSS3를 사용하여 입력 스타일을 하나의 큰 버튼으로 변경합니다. Font Awesome 업로드 아이콘과 함께 작동하며 업로드 필드 주위의 전체 원형 영역을 단순히 둘러쌉니다.

스타일, 색상, 아이콘 또는 기타 항목을 변경하여 사이트와 일치하도록 할 수 있습니다. 기본적으로 기본 입력 스타일에 대한 매우 깨끗한 대안이며 순수한 CSS3에서 실행됩니다.

7. jQuery 사용자 정의 파일 업로드 입력

개발자 Terry Young은 jQuery를 약간 가져와 기존 업로드 필드를 향상시키는 데 사용했습니다. 이것이 결과입니다.

이러한 스타일을 통해 업로드 필드 텍스트, 크기, 버튼 색상을 변경하거나 단일 버튼만 사용하도록 텍스트 필드를 제거할 수 있습니다.

이러한 기능의 대부분은 CSS로 변경할 수 없기 때문에 상당한 양의 jQuery가 필요합니다. jQuery로 작업하는 것이 마음에 들지 않는다면 이러한 옵션은 훌륭합니다.

8. 플랫 UI 입력 파일

다음은 Geoffrey Crofte가 만든 약간 다른 플랫 업로드 필드입니다. 이것은 또한 일부 JavaScript에 의존하지만 CSS3 속성으로 전체 입력의 스타일을 지정합니다.

이것은 샘플 스니펫이므로 실제로 파일을 어디에도 업로드할 수 없습니다. 그러나 이것을 자신의 사이트로 옮기면 쉽게 변경할 수 있습니다. 핵심 디자인과 설정은 이 스니펫에 생명을 불어넣는 것입니다.

반환 기능은 JavaScript에서 실행되므로 파일 업로드, 화면상의 변경 또는 기타 모든 것을 처리할 수 있습니다.

무엇보다도 이 코드는 IE 8까지 거슬러 올라가는 브라우저에서 작동합니다! 따라서 접근성이 염려되는 경우 매우 견고한 옵션입니다.

9. 다중 업로드 필드

여기에 반전이 있는 마지막 사용자 정의 필드가 있습니다. 미학적으로 매우 단순해 보이지만 진정한 가치는 기능에 있습니다.

이 업로드 필드는 한 번에 여러 파일 을 지원하도록 설계되었습니다. 일반적으로 입력 필드에서 이를 볼 수 없거나 최소한 기본적으로는 그렇지 않습니다. 사용자는 동일한 창에서 여러 파일을 선택해야 하며 백엔드에서 이를 지원해야 합니다.

이 스니펫을 사용하면 하나의 업로드 필드에 모든 파일 이름을 나열할 수 있습니다. JavaScript를 사용하여 일반 보기에서 페이지의 다른 곳에 해당 파일 이름을 추가할 수도 있습니다.