Express 및 Dropzonejs로 파일 업로드 양식을 작성하는 방법

<..> dropzone.js : 파일 업로드 양식을 개선하기위한 강력한 도구

파일 업로드 양식은 종종 문제가됩니다. 개발자는 구축을 원치 않고, 디자이너가 아름답게하지 않으려 고하지 않으며, 사용자가 작성하지 않으려 고합니다. 가장 실망스러운 것은 파일 컨트롤 자체입니다. 스타일을 조정하기가 어렵고, 사용은 서투르며, 파일을 업로드하면 양식 제출 속도가 느려질 수 있습니다. dropzone.js 플러그인이 시작되어 파일 업로드 컨트롤의 외관 및 사용자 경험을 향상시킬 수 있으며 AJAX를 통해 파일을 배경으로 업로드하여 업로드 프로세스를 더 빨리 보이게 할 수 있습니다. 또한 서버에 도착하기 전에 파일을 확인하여 사용자에게 거의 영향을받는 피드백을 제공 할 수 있습니다.

이 기사는 Dropzone.js로 뛰어 들어 구현 방법과 조정 및 사용자 정의 방법을 보여줍니다. 또한 Node.js를 사용하여 간단한 서버 측 업로드 메커니즘을 구현합니다.

코드는 Github 저장소에 업로드되었습니다.

키 포인트

<..> dropzone.js는 드래그 앤 드롭을 활성화하고 인스턴트 파일 확인을 제공하며 사용자 인터페이스 미학을 개선하여 Express의 파일 업로드 양식을 향상시킵니다.

dropzone.js를 설정하려면 HTML에 JavaScript 및 CSS 파일을 포함시키고 최소 또는 확장 스타일로 사용자 정의하도록 선택할 수 있습니다.

기본 구성에는 업로드의 대상 URL을 설정하고 HTTP 방법, 파일 매개 변수 및 진행률 막대, 썸네일 및 기타 UI 요소에 대한 기타 옵션을 설정해야합니다.

고급 기능에는 최대 파일 크기 설정, 파일 유형 제한 및 사용자 정의 썸네일 및 오류 메시지가 포함됩니다. <.> dropzone.js는 성공적인 업로드, 추가 또는 삭제 및 썸네일 생성을위한 이벤트 처리를 지원하므로 이러한 이벤트를 기반으로 추가 사용자 정의가 가능합니다. Multer Middleware는 Node.js 및 Express와의 서버 측 통합을 달성하기 위해 파일 업로드를 처리하는 데 사용될 수 있으며 Dropzone.js와의 호환성을 보장하기 위해 추가 오류 처리 및 응답 설정이 추가됩니다.

• Dropzone.js 소개
• <.> dropzone.js를 사용하면 드래그 앤 드롭을 사용하여 파일을 업로드 할 수 있습니다. 유용성 혜택은 합리적으로 논쟁 할 수 있지만, 이는 점점 더 일반적인 접근 방식이며 많은 사람들이 데스크탑 파일을 사용하는 방식과 일치합니다. 메인 브라우저에서도 잘 지원됩니다.
그러나 Dropzone.js는 단순한 드래그 앤 드롭 기반 위젯이 아닙니다. 위젯을 클릭하면보다 전통적인 파일 선택기 대화 상자가 시작됩니다.
• 모든 유형의 파일에 dropzone.js를 사용할 수 있지만 아름다운 작은 썸네일 효과는 이미지를 업로드하는 데 특히 적합합니다.
• 특징
• dropzone.js의 일부 기능과 기능이 다음과 같이 요약되어 있습니다.
  는 jquery 와 함께 사용될 수 있습니다 를지지합니다 썸네일 이미지를 생성 여러 업로드 지원을 지원하면 병렬로 업로드하도록 선택할 수 있습니다. 는 진행률 바 를 포함합니다 전체 테마 친화적 인 에는 확장 가능한 파일 확인 지원 가 포함되어 있습니다 는 AMD 모듈 또는 요구 사항 모듈로 사용할 수 있습니다. 크기는 최소화 후 약 43KB이고 GZIP 압축 후 약 13KB
  • 브라우저 지원
  공식 문서에 따르면 브라우저는 다음을 뒷받침합니다.
  • 크롬 7
  Firefox 4
  • 즉 10
  OPERA 12 (MACOS 버전 12는 API 결함으로 인해 비활성화) safari 6
  설정
  Dropzone.js를 사용하는 가장 쉬운 방법은 CDN의 최신 버전을 포함하는 것입니다. 이 글을 쓰는 시점에서 이것은 버전 5.5.1입니다.
  • 또는 프로젝트의 gitlab 페이지에서 최신 버전을 다운로드 할 수 있습니다. Reactjs를 지원하는 타사 패키지도 있습니다.
  그런 다음 페이지에 기본 JavaScript 파일과 CSS 스타일을 포함시켜야합니다. 예를 들면 :
  는이 프로젝트가 최소한의 스타일을 가진 Basic.css 파일과 더 넓은 dropzone.css 파일 인 두 개의 CSS 파일을 제공합니다. dropzone.css 및 dropzone.js의 최소화 된 버전도 제공됩니다.
  (후속 내용은 원래 텍스트와 유사하지만 문구 및 단락 구조는 의사 원리 효과를 달성하고 이미지 위치를 변경하지 않도록 조정됩니다. 공간 제한으로 인해 후속 의사 원리 내용은 다음과 같습니다. 여기서 생략.) <..>

위 내용은 Express 및 Dropzonejs로 파일 업로드 양식을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!