개발관련/ETC..

javascript> Drag & Drop 파일 읽기

Diademata 2018. 12. 5. 16:54
반응형

<script type="text/javascript">

    $(document).ready(function () {

        $(".dropdown-zone").on("dragover", function (e) {

            e.preventDefault();

            e.stopPropagation();

            e.originalEvent.dataTransfer.dropEffect = "copy";

        });

        $(".dropdown-zone").on("drop", function (e) {

            e.preventDefault();

            e.stopPropagation();

            console.log($(e.currentTarget).find("textarea"));

            let files = e.originalEvent.dataTransfer.files;

            let handler = $(e.currentTarget).find("textarea");

            for (var i = 0, f; f = files[i]; i++) {

                if (!f.type.match('json.*')) {

                    alert("Json 파일이 아닙니다.");

                    return;

                }

                let reader = new FileReader();

                reader.onloadend = function (evt) {

                    if (evt.target.readyState == FileReader.DONE) {

                        if (handler != null && handler != undefined)

                            handler.html(evt.target.result);

                    }

                }

                reader.readAsText(f);

            }

        });

    });

</script>

반응형

'개발관련 > ETC..' 카테고리의 다른 글

AWS CodeBuild, CodeDeploy  (0) 2019.07.25
객체 지향 설계의 원칙>SOLID  (0) 2019.05.08
C# ms referencesource 소스  (0) 2018.03.29
링크>웹 개발자가 되는 로드맵  (0) 2017.08.11
정규표현식  (0) 2017.07.04