파일 업로드 기능을 구현하기 찾아보다 발견한 Dropzone에 대해 정리를 한다.
샘플 코드는 아래 깃 헙에 업로드하였다.
https://github.com/workshko/javascriptSutdy/tree/master/dropzone
workshko/javascriptSutdy
자바스크립트 스터디 프로젝트. Contribute to workshko/javascriptSutdy development by creating an account on GitHub.
github.com
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dropzone 샘플</title>
<link rel="stylesheet" href="css/dropzone.min.css" />
</head>
<body>
<h2>dropzone 테스트</h2>
<div class="dropzone-area">
<form name="fname">
<div class="dropzone" id="fileDropzone"></div>
<button id="btn-upload-file">서버전송</button>
</form>
</div>
<script src="js/dropzone.min.js"></script>
<script src="https://code.jquery.com/jquery-git.min.js"></script>
<script>
//fileDropzone dropzone 설정할 태그의 id로 지정
Dropzone.options.fileDropzone = {
url: '업로드할url', //업로드할 url (ex)컨트롤러)
init: function () {
/* 최초 dropzone 설정시 init을 통해 호출 */
var submitButton = document.querySelector("#btn-upload-file");
var myDropzone = this; //closure
submitButton.addEventListener("click", function () {
console.log("업로드");
//tell Dropzone to process all queued files
myDropzone.processQueue();
});
//기존에 업로드된 서버파일이 있는 경우,
// $.ajax({
// url: 'upload.php',
// type: 'post',
// data: {request: 2},
// dataType: 'json',
// success: function(response){
// $.each(response, function(key,value) {
// var mockFile = { name: value.name, size: value.size };
// myDropzone.emit("addedfile", mockFile);
// myDropzone.emit("thumbnail", mockFile, value.path);
// myDropzone.emit("complete", mockFile);
// });
// }
// });
},
autoProcessQueue: false, // 자동업로드 여부 (true일 경우, 바로 업로드 되어지며, false일 경우, 서버에는 올라가지 않은 상태임 processQueue() 호출시 올라간다.)
clickable: true, // 클릭가능여부
thumbnailHeight: 90, // Upload icon size
thumbnailWidth: 90, // Upload icon size
maxFiles: 5, // 업로드 파일수
maxFilesize: 10, // 최대업로드용량 : 10MB
parallelUploads: 99, // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 컨트롤러에 넘긴다.)
addRemoveLinks: true, // 삭제버튼 표시 여부
dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
uploadMultiple: true, // 다중업로드 기능
};
</script>
</body>
</html>
여기서 작성 시 중요한 점은,
<div class="dropzone" id="fileDropzone"></div>
파일이 업로드 되는 구역의 div tag의 id를 'fileDropzone' 으로 지정하였을 경우,
스크립트단에서 Dropzone.options.fileDropzone 으로 지정하여 dropzone을 세팅하여야 한다.
그 외의 옵션에 대해서는 주석을 통해 기록해 두었으니 참고하도록 하고, 더 많은 옵션에 대해 알아보고 싶다면 아래 링크에서 확인해보도록 한다.
Dropzone.js
dropzone.js DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable. Scroll down!
www.dropzonejs.com
다음 편에서는. Net MVC5에서 Dropzone js를 적용하여 파일 업로드를 실제로 구현해보는 예제를 해볼 예정이다.
'프로그래밍 > javascript' 카테고리의 다른 글
| [DevExtreme] datagrid 사용법 및 옵션 정리 (0) | 2020.10.18 |
|---|---|
| [DevExtreme] 유료 js 컴포넌트 정리 (1) | 2020.10.11 |
| ASP.NET 에서 Ajax 사용하기. (0) | 2018.04.30 |
