JSFiddle - React, Tailwind, and code Playground

by Dream Mkker

HTML

<input type="file" name="filename" id="filename">
<div id="data" contentEditable="true"></div>

CSS

#data{
  padding: 5px 5px 5px 5px;
  margin: 5px 5px 5px 5px;
  background-color: #FFAAFF;
}

JavaScript

$("#filename").change(function(e) {
  var ext = $("input#filename").val().split(".").pop().toLowerCase();
	if($.inArray(ext, ["csv"]) == -1){return alert('僅可上傳CSV檔案。');}
  if (e.target.files != undefined) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var cval=e.target.result.split("\n").join(",").split(",");
        cval = cval.filter(function(n){return n});  
        var resp="";
        for(var key in cval) { // 類似foreach
          resp= ((resp == "")? '': resp+",")+cval[key]; 
          if(resp.length >= 200){break;} // 上限字數
        }
        $("#data").html(resp);
      };
      reader.readAsText(e.target.files.item(0));
  }
  return false;
});