タグ:FileAPI
<div id="drop_wrap"> <p>ファイルをドロップしてください</p> </div> <table id="data_result"> <thead> <th>見出し1</th> <th>見出し2</th> <th>見出し3</th> <th>見出し4</th> </thead> <tbody> <!-- ここにCSVデータ表示 --> </tbody> </table>
#drop_wrap { display: block; border: 2px dashed #bbb; border-radius: 5px; color: #bbb; padding: 25px; text-align: center; margin: 10px auto 5px; font-size: 18px; font-weight: bold; -khtml-user-drag: element; margin: 5% auto; width: 80%; }
$(function(){ // FileAPIでCSVファイルのドロップ出力処理 $("#drop_wrap").on("drop", function(e) { e.preventDefault(); var $result_body = $('#data_result tbody'); var files = e.originalEvent.dataTransfer.files[0]; var reader = new FileReader(); reader.onload = function(event) { // " "ごとに分割して配列化 var lineArr = event.target.result.split(" "); // 行と列の二次元配列にする var itemArr = []; for (var i = 0; i < lineArr.length; i++) { itemArr[i] = lineArr[i].split(","); } // tableタグで出力 var insert = ''; for (var i = 0; i < itemArr.length; i++) { insert += '<tr>'; for (var j = 0; j < itemArr[i].length; j++) { insert += '<td>' + itemArr[i][j] + '</td>'; } insert += '</tr>'; } $result_body.html(insert); } reader.readAsText(files, 'Shift_JIS'); }).on("dragenter", function() { return false; }).on("dragover", function() { return false; }); });これでドロップ要素エリアにCSVファイルを投げ込むと展開されたCSVデータがtable要素内に表示することが出来ます。 今回のデモはShift-Jis文字コードのCSVで対応しているため、その他の文字コードはreadAsText関数内で別途対応してください。 あとブラウザのメモリなどの関係でうん千行単位のCSVデータは処理落ちすると思います。未検証