0

CSVファイルを選択し、実行ボタンを押下したらCSVファイルのレコード件数チェック処理が行われるようにしたいですがネットで調べても実装方法が分かっていない状態です。10件以上あればエラーのダイアログを表示するようにしたいです。どう修正したらよろしいでしょうか。
●CSVファイルの中身の例
no,title,year
1,てすと,2011
2,テスト,2012
3,TEST,2015

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>あいうえお商店</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
  <body>
    <p>
      <input type="file" name="datafile" id="file1">
    </p>
    <input type="button" value="実行" id="checkfile"> 
    <script type="text/javascript">
      $("#checkfile").click(function () {
        //File件数チェック
      });
    </script>
  </body>
  </html>

1 件の回答 1

2

HTML5からFILE APIを使用してローカルファイルにアクセスできるようになりました。
この場合FileReaderを使用してファイルの中身をスクリプトにロードします。
まず、FileReaderオブジェクトを作成し

var reader = new FileReader();
読込が完了(成功した場合onloadイベントが起きる)した場合のイベントを設定します。
reader.onload = function(e) { ... }

readAsTextでファイルの読み込みをします。
reader.readAsText(file.files[0]);

読込が完了するとreader.resultに指定文字コード(エンコードが指定されなかった場合UTF-8)文字列で内容が保存されます。
ファイルの内容が何行あるかは
reader.result.split("\n").lengthのようなやり方で調べることができます。
最後の行には改行がない、最初の行はフィールド名としてカウントしないなど指定行数については調整ください。
(または別の方法を実装下さい)
全体的な例は以下の様になります。

$("#checkfile").click(function () {
    var file = $("#file1").get(0);//または単に file1 を使用
    if(file.files.length == 0){
        alert("現在ファイルは選択されていません");
    } else {
        var reader = new FileReader();

        reader.onload = function(e){
            if(reader.result.split("\n").length >= 10)
                alert("10件以上のレコードがあります");
        };

        reader.readAsText(file.files[0]);
    }
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。