Dropzone.js는 파일 드래그 앤 드롭 업로드 기능을 구현합니다.

dropzone.js는 AJAX 비동기 파일 업로드 기능을 제공하고, 파일 드래그를 지원하고, 최대 파일 크기를 지원하고, 파일 형식 설정을 지원하고, 업로드 결과 미리보기를 지원하고, jQuery 라이브러리에 의존하지 않는 오픈 소스 JavaScript 라이브러리입니다.

Dropzone을 사용하여

정식 업로드 양식을 만들고 해당 양식에 .dropzone 클래스를 제공할 수 있습니다.

<form id="mydropzone" action="/upload.php" class="dropzone"></form>

이런 방식으로 Dropzone은 자동으로 .dropzone의 양식 요소를 찾아 upload.php와 같은 action 속성을 통해 백그라운드에서 파일을 수신하는 프로그램에 업로드합니다. , 매우 일반적인 파일 입력 형식인

<input type="file" name="file" />

를 허용하는 것과 같습니다. 그런 다음 upload.php에 업로드 코드를 작성합니다. Dropzone 공식 웹사이트에서는 js 코드만 다운로드하고 백그라운드 업로드 코드는 다운로드하지 않습니다. , helloweba.com에서는 PHP 버전의 전체 업로드 예제 코드를 제공합니다. 소스 코드를 다운로드해도 됩니다.

다음 단계는 dropzone.js를 소개하는 것입니다.

<script src="dropzone.min.js"></script>

그러면 아무것도 할 필요가 없습니다. 브라우저를 열고 드래그 앤 드롭 업로드 효과를 테스트해 보세요. 물론 스타일을 직접 작성할 수도 있고, 예제 코드를 참조할 수도 있습니다.

또 다른 상황이 있습니다. 업로드된 HTML에 양식을 포함하고 싶지 않으므로 HTML에 div #mydropzone을 배치하면 됩니다

<div id="mydropzone" class="dropzone"></div>

그런 다음 js 호출을 구성합니다.

var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});

jquery를 사용하는 경우 jQuery 버전은 다음과 같이 호출할 수 있습니다.

$("#dropz").dropzone({
url: "upload.php"
})

웹페이지를 실행했는데도 업로드 효과가 보이나요?

Dropzone 구성

Dropzone의 특징은 매우 유연하며 다양한 옵션, 이벤트 등을 제공한다는 것입니다. 다음은 Dropzone에서 일반적으로 사용되는 몇 가지 구성 항목입니다.

url: 파일이 제출되는 페이지를 나타내는 가장 중요한 매개변수입니다.

방법: 기본값은 post이며, 필요한 경우 put으로 변경할 수 있습니다.

paramName: 요소의 name 속성과 동일하며 기본값은 file입니다.

maxFilesize: 최대 파일 크기, 단위는 MB입니다.

maxFiles: 기본값은 null이며 최대 파일 수를 제한하기 위해 숫자 값으로 지정할 수 있습니다.

addRemoveLinks: 기본값은 false입니다. true로 설정하면 삭제 링크가 파일에 추가됩니다.

acceptedFiles: 업로드가 허용되는 파일 형식을 지정합니다. 형식은 쉼표로 구분된 MIME 유형 또는 확장자입니다. 예: image/*,application/pdf,.psd,.obj

uploadMultiple: Dropzone이 한 번에 여러 파일을 제출할 수 있는지 여부를 나타냅니다. 기본값은 거짓입니다. true로 설정하면 HTML 양식에 여러 속성을 추가하는 것과 같습니다.

헤더: 설정 시 추가 헤더 정보로 서버에 전송됩니다. 예: {"custom-header": "value"}

init: Dropzone이 초기화될 때 호출되는 함수이며 고유한 이벤트 리스너를 추가하는 데 사용할 수 있습니다.

forceFallback: Fallback은 브라우저가 이 플러그인을 지원하지 않을 때 대안을 제공하는 메커니즘입니다. 기본값은 거짓입니다. true로 설정하면 강제 대체됩니다.

fallback: 브라우저가 이 플러그인을 지원하지 않는 경우 호출되는 함수입니다.

위는 편집자가 소개한 Dropzone.js 파일 드래그 앤 드롭 업로드 구현입니다. 궁금한 점이 있으면 메시지를 남겨주시면 편집자가 답변해 드리겠습니다. 제 시간에 당신에게. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

파일 드래그 앤 드롭 업로드 기능을 구현한 Dropzone.js와 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!