프로그래밍/javascript: 2개의 글

Dropzone js를 사용한 파일업로드 [기본]

Posted by 고 고특파원
2020. 4. 2. 19:40 프로그래밍/javascript
dropzone 파일업로드

파일 업로드 기능을 구현하기 찾아보다 발견한 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을 세팅하여야 한다.

 

그 외의 옵션에 대해서는 주석을 통해 기록해 두었으니 참고하도록 하고, 더 많은 옵션에 대해 알아보고 싶다면 아래 링크에서 확인해보도록 한다.

 

https://www.dropzonejs.com/

 

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' 카테고리의 다른 글

Dropzone js를 사용한 파일업로드 [기본]  (0) 2020.04.02
ASP.NET 에서 Ajax 사용하기.  (0) 2018.04.30
이 댓글을 비밀 댓글로

ASP.NET 에서 Ajax 사용하기.

Posted by 고 고특파원
2018. 4. 30. 15:31 프로그래밍/javascript

1. Repository클래스 구성

 

- 이 부분은 DB접속 및 데이터를 가져오는 클래스입니다.

 

단순히 DB에 접속하여 데이터를 가져오는 부분이기 때문에 각자의 스타일대로 구현 하면된다.

 

나는 ADO.Net을 이용하여 DB에 접근하고 프로시저를 통해 DataSet을 반환하도록 구성할 것이다.

 

최근들어 알게된 Micro ORM인 Dapper.Net 또한 유용하게 사용할 수 있으니 관심이 있는 사람은

 

참고해보면 좋을것 같다.

 

 

public class RepositoryClass
{
        
        public List<모델클래스> GetData(int Key)
        {
            

List<모델클래스>data = new List<모델클래스>();

 

 

            return data;

        }

}

 

 

 

2. 모델클래스 정의

 

이 부분은 DB에서 가져온 DataTable의 ModelView 클래스 입니다.

 

단순히 DB에서 가져오는 DataTable의 항목을 멤버로 가지면 된다.

 

 

public class 모델클래스

{

int Key {get;set;} //Key

}

 

 

 

3. WebService 구성 (.asmx)

 

이 부분은 ajax에서 호출하기 위한 웹서비스를 구성하는 부분입니다.

 

현재 내가 정리하는 부분은 웹서비스를 호출하면 해당하는 데이터를 Json방식으로 데이터를 반환 하고

 

있지만,

 

.net에서는 .asmx의 웹서비스는 상당히 오래된 기술이라고 한다..

 

최근 들어서는 .net의 WEB API를 호출하여 (POST, GET, PUT, DELETE) 의 요청을 하여 Json 방식

 

으로 데이터를 반환 시킬 수도 있다고 한다.

 

이부분에 대해서는 다음 기회에 알아가도록 한다.

 

 


        [WebMethod(EnableSession = true)]
        public List<모델클래스> GetData(int key = 0)
        {
            Repository클래스 repository = new Repository클래스();

            return repository.GetData(key);

        }

 

 

 

4.aspx에서 ajax 호출

 

이 부분에서 ajax를 호출 한다.

 

 

function GetData() {

            var keydata = '1';

 

            $.ajax({
                type: "POST",
                url: "WebService/웹서비스.asmx/GetData"

                data: "{key':'" + keydata + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                }
            });
            function OnSuccess(r) {

 

//성공시 처리할 내용 수행

 

                }
            }

        }

 

 

 

 

'프로그래밍 > javascript' 카테고리의 다른 글

Dropzone js를 사용한 파일업로드 [기본]  (0) 2020.04.02
ASP.NET 에서 Ajax 사용하기.  (0) 2018.04.30
이 댓글을 비밀 댓글로