A010 ファイルリード　JS

テキストファイルを読み込んで変換するサンプルです。
下記は、csv形式のテキストに装飾を追加するものです。

パーツ

Webページの構成要素はhtmlとJavaScript部分からなります。

html

<!--入力のテキストエリアについて-->
<form name="test"><input id="selfile" type="file" /><br /><textarea cols="40" name="txt" rows="10"></textarea>
<p></p>
</form>

<!--ボタン-->
<div align="center"><input id="field16" class="btn" style="text-align: center;" type="button" value="変換" /></div>
<p></p>

<!--出力のテキストエリアについて-->
<form name="test2">
<p><textarea style="background-color: #d8d8d8;" cols="40" name="txt2" readonly="readonly" rows="10"></textarea></p>
</form>

javaSprict

<script>

var obj1 = document.getElementById("selfile"); //入力エリア
      
//ダイアログでファイルが選択された時
obj1.addEventListener("change",function(evt){

  var file = evt.target.files;

  //FileReaderの作成
  var reader = new FileReader();
  //テキスト形式で読み込む
  reader.readAsText(file[0]);
  
  //読込終了後の処理
  reader.onload = function(ev){
    //テキストエリアに表示する
    document.test.txt.value = reader.result;


  }
},false);


window.onload = function () {
    //「変換」ボタンをクリックした場合
    document.getElementById("field16").onclick =  function () {
        inputFileMake();}
}


//----------------------------------
//「変換」ボタンをクリックした処理
//----------------------------------
function inputFileMake(){

　//テキストエリアの値
    document.test2.txt2.value = "";

    txtareaStr = document.test.txt.value;


    txtArry = txtareaStr.split(/\n/);
    txtArry_len = txtArry.length;
    var bufStr1 = "";
    var pointFlag = false;
    var p_i=0;
    searchTerm = '***p';
    count_one = 0;
    ConvString = "";

    //スプリット記号変換
    for(i=0; i<txtArry_len;i++) {
         ConvertCode1(txtArry)//d3.js用データ　下記関数
       　document.test2.txt2.value = ConvString; //関数戻り値
      }
 }

//-----------------------
//d3.js用のグラフ用データ変換
//-----------------------
function ConvertCode1(txtArry){
  bufStr = txtArry[i].split(' '); //スペース切り
  ConvString  +="["+bufStr[0]+","+bufStr[1]+"],\n";
//ConvString  += txtArry[i] + "\n"; //エコーの場合
  return ConvString;
}
</script>

参照