무료 ES5 / ES6 자바 스크립트 파일 업로드 플러그인 - Uppy

가장 까다로운 양식 입력 중 하나는 파일 업로드. 기본 HTML 스타일이지만 세계에서 가장 예쁜 것은 아닙니다..

Uppy 파일 업로드를 완전히 새로운 차원으로 끌어 올립니다. 맞춤 인터페이스 및 동적 Ajax 스타일 로딩 프로세스.

그것 ES5 / ES6 코드에서 실행됩니다., 최신 JavaScript 표준을 사용하여 웹 응용 프로그램을 만들 수 있습니다. 그리고 심지어 클라우드 스토리지 사이트에서 파일 업로드 지원 Dropbox 또는 Google 드라이브와 같은 다면 파일 업로드 스크립트 웹용.

어피 완전 무료 및 오픈 소스, GitHub에 관한 레포와 함께. 그러나이 플러그인을 설치하는 가장 쉬운 방법은 npm 또는 Yarn을 사용하는 것이므로 실제 패키지처럼 실행하십시오..

파일을 웹 사이트에 추가하면 Uppy.js 파일과 CSS 코드 포함. 그런 다음 원하는 입력 필드를 타겟팅하고 나머지는 Uppy가 처리합니다..

고유 한 인터페이스가 하나의 큰 사각형 배치처럼 보입니다. 파일을 끌어서 놓기. 당신은 또한 수 하드 드라이브에서 항목을 선택하십시오. 또는 외부 URL에서 원격으로 파일 업로드. 꽤 미친!

전체 설치 프로세스는 설명서 페이지에서 찾을 수 있지만 ECMAScript 6에 대한 최소한의 이해가 필요합니다.. 이 라이브러리는 스크립팅의 미래를 추구하며 순수 바닐라 자바 ​​스크립트와 함께 사용하는 가장 쉬운 방법은 아닙니다..

그러나 웹 개발을 진지하게 생각한다면 어쨌든 ES6를 배울 가치가 있습니다. 찾을 수 있습니다. 온라인 자원 톤 자기 가르침을 위해 그리고 심지어 Uppy를 처음으로 사용할 수도 있습니다. “레알” 다이빙 및 학습 시작 프로젝트.

대시 보드 예를 확인하려면 Uppy의 실제 모습보기. 이 페이지의 경우 업로드는 트리거 버튼 뒤에 숨겨져 있습니다., 버튼을 클릭하면 모달 업로드 필드가 표시됩니다..

여기에서 사진을 업로드할지 여부를 선택할 수 있습니다. 컴퓨터, 웹 또는 웹캠에서 가져 오기!

예제 페이지는 다음을 포함하여 살펴볼 묶음을 제공합니다. 끌어서 놓기 예제, 함께 국제화 데모 페이지.

그러나 이것이 실제로 어떻게 작동 하는지를 배우기 위해, 나는 문서를 훑어보고 주요 GitHub 레포를 통해 브라우징하는 것이 좋습니다. 트위터 @transloadit에서 제작자와 생각을 공유 할 수도 있습니다..