August 2, 2019 Comments(0) Uncategorized

    dropzone.js 예제

    업로드 프로세스가 성공하면 서버 쪽 코드와 관련된 유일한 요구 사항은 2xx 응답 코드를 반환하는 것입니다. 응답의 내용과 형식은 전적으로 사용자의 귀중하며, 응답 사용 방식에 따라 달라질 수 있습니다. 예를 들어 업로드된 파일에 대한 경로또는 자동으로 생성된 축소판 그림에 대한 경로가 포함된 JSON 개체를 반환할 수 있습니다. 이 예제에서는 Multer에서 제공하는 수많은 메타데이터(즉, 파일 개체의 내용)를 반환하기만 하면 됩니다. 외관을 사용자 정의 할 수있는 방법의 예를 들어, 여기에 부트 스트랩을 사용하여 jQuery 파일 업로드 위젯과 똑같이보고 느낄 수 있도록 조정 된 위젯의 데모입니다. 예를 들어 CSRF(사이트 간 요청 위조) 보호에 대한 한 가지 방법은 뷰에서 토큰을 출력한 다음 POST/PUT/DELETE 끝점이 유효한 토큰에 대한 요청 헤더를 확인하도록 하는 것입니다. 이와 같이 토큰을 출력했다고 가정해 보세요: 위젯의 모양을 변경하는 가장 간단한 방법은 CSS를 사용하는 것입니다. 위젯에는 dropzone 클래스가 있으며 구성 요소 요소에는 dz-로 접두번이 있는 클래스가 있습니다. 예를 들어 드롭존 내부의 클릭 가능한 영역에 대해 dz-clickable, 캡션에 대한 dz-메시지, 업로드된 각 파일의 미리 보기를 래핑하기 위한 dz-미리 보기/dz-이미지 미리 보기 등등. dropzone.css 파일을 참조하여 살펴보십시오. 다음은 업로드가 완료되면 파일을 자동으로 제거하는 예제입니다: 예를 들어 이미지를 업로드한 후 파란색 진행률 표시줄이 여전히 이동하고 사라지지 않습니다(파일이 서버에 이미 있음).

    . 데모 페이지에서도 동일하게 작동합니다. 스크립트를 보면 업로드가 완료된 후 또는 파일이 이미 있는 경우 몇 가지 메시지가 표시됩니다. 감사합니다. 🙂 이 예제에는 불필요한 HTML 코드가 많이 있습니다. maxFilesize 속성은 메가바이트의 최대 파일 크기를 결정합니다. 기본값은 1000바이트 크기이지만 filesizeBase 속성을 사용하면 다른 값(예: 1024바이트)으로 설정할 수 있습니다.