파일 업로드 기능을 구현하기 찾아보다 발견한 Dropzone에 대해 정리를 한다.
샘플 코드는 아래 깃 헙에 업로드하였다.
https://github.com/workshko/javascriptSutdy/tree/master/dropzone
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을 세팅하여야 한다.
그 외의 옵션에 대해서는 주석을 통해 기록해 두었으니 참고하도록 하고, 더 많은 옵션에 대해 알아보고 싶다면 아래 링크에서 확인해보도록 한다.
다음 편에서는. Net MVC5에서 Dropzone js를 적용하여 파일 업로드를 실제로 구현해보는 예제를 해볼 예정이다.
'프로그래밍 > javascript' 카테고리의 다른 글
[DevExtreme] datagrid 사용법 및 옵션 정리 (0) | 2020.10.18 |
---|---|
[DevExtreme] 유료 js 컴포넌트 정리 (1) | 2020.10.11 |
ASP.NET 에서 Ajax 사용하기. (0) | 2018.04.30 |