개발관련/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>

반응형