Skip to content

Instantly share code, notes, and snippets.

@kTmnh

kTmnh/gist:5525045

Created May 6, 2013 13:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kTmnh/5525045 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kTmnh/5525045 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kTmnh created this gist May 6, 2013.
    55 changes: 55 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    #dropTarget {
    width: 100%;
    height: 200px;
    border: 1px dashed #000000;
    }
    </style>
    </head>
    <body>
    <div id="dropTarget">drop here</div>
    <input id="input" type="file">
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    (function () {
    var fr = new FileReader();
    var input = $("#input")[0];
    var dropTarget = $("#dropTarget")[0];
    input.addEventListener("change", function (e) {
    var temp = e.target.files[0];
    var type = temp.type;
    fr.readAsText(temp);
    fr.addEventListener("load", function (e) {
    console.log(e.target.result);
    });
    }, false);
    dropTarget.addEventListener("dragenter", function (e) {
    e.stopPropagation();
    e.preventDefault();
    }, false);
    dropTarget.addEventListener("dragexit", function (e) {
    e.stopPropagation();
    e.preventDefault();
    }, false);
    dropTarget.addEventListener("dragover", function (e) {
    e.stopPropagation();
    e.preventDefault();
    }, false);
    dropTarget.addEventListener("drop", function (e) {
    var temp = e.dataTransfer.files[0];
    fr.readAsText(temp);
    fr.addEventListener("load", function (e) {
    console.log(e.target.result);
    });
    e.stopPropagation();
    e.preventDefault();
    }, false);
    })();
    </script>
    </body>
    </html>