1

.xml で行ったのと同じように (特定の列の値を取得する)、ブラウザーで .csv ファイルをローカルで開いて処理したいと考えています。

jquery-csvにたどり着き、 Client-Side File Handling exampleを使用できるようになりました。欠点は、毎回「ファイルを選択」ダイアログを使用する必要があることです。このステップをカットして、選択した csv を自動的に開きたいと思いました。

reader.onload選択したファイルのリロードを待っていると思いますが、それは呼び出しを解決することの問題だと思いました。さらにいくつかの例を見た後、次のように onload 呼び出しを使用して関数をコピーしまし$( document ).ready( TextData );た

function TextData() {
var file = "export.csv";
// read the file metadata
var output = ''
    output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
    output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
    output += ' - FileSize: ' + file.size + ' bytes<br />\n';
    output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';

// read the file contents
printTable(file);

// post the results
$('#list').append(output);

}

しかし、それは私にundefinedエラーを与えます。（これはまだ値を読み取っていませんが、ファイルが読み取られていることを確認するための良い出発点だと思いました）

ファイルの選択ダイアログを元に戻すと、機能します。任意のヒント？？

元のコード:

<script>
  $(document).ready(function() {
    if(isAPIAvailable()) {
      $('#files').bind('change', handleFileSelect);
    }
  });

  function isAPIAvailable() {
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      // Great success! All the File APIs are supported.
      return true;
    } else {
      // source: File API availability - http://caniuse.com/#feat=fileapi
      // source: <output> availability - http://html5doctor.com/the-output-element/
      document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
      // 6.0 File API & 13.0 <output>
      document.writeln(' - Google Chrome: 13.0 or later<br />');
      // 3.6 File API & 6.0 <output>
      document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
      // 10.0 File API & 10.0 <output>
      document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
      // ? File API & 5.1 <output>
      document.writeln(' - Safari: Not supported<br />');
      // ? File API & 9.2 <output>
      document.writeln(' - Opera: Not supported');
      return false;
    }
  }

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    var file = files[0];

    // read the file metadata
    var output = ''
        output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
        output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
        output += ' - FileSize: ' + file.size + ' bytes<br />\n';
        output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';

    // read the file contents
    printTable(file);

    // post the results
    $('#list').append(output);
  }

  function printTable(file) {
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event){
      var csv = event.target.result;
      var data = $.csv.toArrays(csv);
      var html = '';
      for(var row in data) {
        html += '<tr>\r\n';
        for(var item in data[row]) {
          html += '<td>' + data[row][item] + '</td>\r\n';
        }
        html += '</tr>\r\n';
      }
      $('#contents').html(html);
    };
    reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
  }
</script>

HTML:

<div id=inputs class=clearfix>
  <input type=file id=files name=files[] multiple />
</div>
<hr />
<output id=list>
</output>
<hr />
<table id=contents style="width:100%; height:400px;" border>
</table>
4

1 に答える 1

1

html5 機能の readfile() を使用できます

$(document).ready(function() {
  $("input[type=file]").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
      var file = e.originalEvent.srcElement.files[i];

      var csv = document.createElement("p");
      var reader = new FileReader();
      reader.onloadend = function() {
        csv.html = reader.result;
      }
      reader.readAsDataURL(file);
      console.log(csv);
      $("input[type=file]").after(csv);
    }
  });
});

この例では、csv ファイルが読み込まれ、html ドキュメントに添付されます。クライアント側でこのファイルを編集するには、「csv」変数を構成できます。

于 2014-08-12T09:53:19.730 に答える