使用HTML5解析静态CSV文件



找到了一个使用HTML5文件api解析csv文件并非常漂亮地显示输出的很好的演示。

http://rohitrox.github.io/js_csv/

如果我不想从本地系统加载文件,但有一个静态文件要输入,例如test.csv,该怎么办?我知道这是一个安全问题,但有什么解决办法吗?

function handleFileSelect(){
  var file = document.getElementById("the_file").files[0];
  var reader = new FileReader();
  var link_reg = /(http://|https://)/i;
  reader.onload = function(file) {
              var content = file.target.result;
              var rows = file.target.result.split(/[rn|n]+/);
              var table = document.createElement('table');
              for (var i = 0; i < rows.length; i++){
                var tr = document.createElement('tr');
                var arr = rows[i].split(',');
                for (var j = 0; j < arr.length; j++){
                  if (i==0)
                    var td = document.createElement('th');
                  else
                    var td = document.createElement('td');
                  if( link_reg.test(arr[j]) ){
                    var a = document.createElement('a');
                    a.href = arr[j];
                    a.target = "_blank";
                    a.innerHTML = arr[j];
                    td.appendChild(a);
                  }else{
                    td.innerHTML = arr[j];
                  }
                  tr.appendChild(td);
                }
                table.appendChild(tr);
              }
              document.getElementById('list').appendChild(table);
          };
  reader.readAsText(file);
 }
 document.getElementById('the_form').addEventListener('submit', handleFileSelect, false);
 document.getElementById('the_file').addEventListener('change', fileInfo, false);

实际上,从外部URL请求文本文件并不罕见;事实上,它早于File API。听说过"AJAX"这个流行词吗?

异步请求只是稍微复杂一点,以适当的跨浏览器方式完成,所以有许多库,在其他功能中,包含简单的方法来完成它。JQuery就是一个例子,通常用"$"符号来识别,但你也可以通过谷歌搜索"AJAX库"来搜索你自己的JQuery。

$.ajax({
    url: 'files/file.csv', // this will automatically be seen as a relative URL
      //to the page you've navigated to, ie "http://www.google.com/files/file.csv"
    success: function(data) {
        // This function won't execute right away, but when the server's
        // text response comes back.
        // "data" will be a string containing the text of the response.
        document.getElementById("csvOutputDisplay").textContent = data;
    }
}

No。这是不可能的。每次都需要手动选择本地文件。如果不这样的话,任何网站都可以在没有你允许的情况下访问你的文件。

最新更新