くりーむわーかー

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

2016年08月

.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'));
});

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

D3.js text追加したら最初の数件が無視される

久しぶりにD3イジイジしてたら、しょーもないところではまった。

svg.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .attr("text-anchor", "left")

上の感じで、text要素を追加するんだけども、datasetの最初の数件が無視される。なんでじゃーって色々見てみたら、x軸追加してるんだけど、X軸のラベルのところがtext要素になっててselectAll("text")やるとそっちも拾ってしまい、X軸に出てるラベルの個数分、datasetの先頭から無視されてた。

お恥ずかしい感じ。そりゃそーだ。つか、要素名を直でselectAllはするもんじゃないですね。アホだ。

問合せ