くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

HTML5

.NetMVC HTML5 ファイルドロップで複数ファイルアップロード

よくあるやつ。昔はFlash使ってたけど、最近はHTML5でやった方が軽くてよさげ。 受け取り側は.net MVCで。

■HTML

<div>
    <div id="drop_zone" style="width:500px;border : 2px dashed #808080;margin:10px;padding:10px;">
        <span>ファイルをココにドロップ</span>
        <progress id="testprogress" value="0" max="100">0%</progress>
    </div>
</div>

■JavaScript


<script type="text/javascript">
    //必要なのが使えるかチェック
    if (window.File && window.FileReader && window.FileList && window.Blob && window.FormData) {
       //OK
    } else {
        alert('ブラウザ変えてやり直し.');
    }
    function handleFileSelect(evt) {
        //ブラウザのデフォルトの動作をキャンセル
        evt.stopPropagation();
        evt.preventDefault();
        
        var files = evt.dataTransfer.files;//ドロップイベントでドロップされたファイル
        var fd = new FormData();//送信用Formデータ
        for (var i = 0, f; f = files[i]; i++) {
            fd.append('files', f);//送信用Formデータに追加。キーの名前はコントローラの引数の名前と合わせておかないとダメ
        }
        AjaxPost(fd);//Ajaxでファイル送信
    }
    function handleDragOver(evt) {
        //ブラウザのデフォルトの動作をキャンセル
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }
    //送信
    function AjaxPost(fd) {
        $.ajax({
            type: "POST",
            url: "/Upload/TestUp",
            xhr: function () {//送信の進捗やりたいとき
                XHR = $.ajaxSettings.xhr();
                if (XHR.upload) {
                    XHR.upload.addEventListener('progress',
                            function (e) {
                                progre = parseInt(e.loaded / e.total * 10000) / 100;
                                document.getElementById("testprogress").value = progre;
                            }, false);
                }
                return XHR;
            },
            processData: false,
            contentType: false,
            data: fd,
            success: function (dataobj) {
                console.log(dataobj);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest)
            }
        });
    }
    var dropZone = document.getElementById('drop_zone');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);
</script>

■Controler

        [HttpPost]
        public ActionResult TestUp(HttpPostedFileBase[] files)
        {
            //filesにファイルが全部入ってるから後は保存でもなんでも好きにやる。
            return View();//きっと成功したらなんか返した方がいいけどとりあえず。
        }

ほんとはフォルダドロップで中のファイルを一括でとかにも対応したいんだけど、 割と面倒そうなので、ファイル複数選択してドロップ。今度、フォルダもやる。

ClipboardAPIのデータを取得する

ClipboardAPIを使ってみる。

<div class="pasteDiv" draggable="true">
ここでCtrl+V
</div>

document.querySelector('.pasteDiv').addEventListener('paste', function (e) {
	console.log(e.clipboardData.getData('text/plain'));
});

例えば、入力補助的にエクセルでちゃっと入力したデータをコピーして 貼り付けて、入力欄にセットするみたいな使い道とか。

問合せ