web-dev-qa-db-ja.com

アップロードされたファイルのデータをjavascriptで取得する

Csvファイルをアップロードし、そのファイル内のデータを処理したい。そうするための最良の方法は何ですか？私はphpスクリプトを使用しないことを好みます。次の手順を実行しました。しかし、このメソッドはファイルパスではなくファイル名のみを返すため、目的の出力が得られませんでした。

<form id='importPfForm'>
<input type='file' name='datafile' size='20'>
<input type='button' value='IMPORT' onclick='importPortfolioFunction()'/>
</form>

function importPortfolioFunction( arg ) {
    var f = document.getElementById( 'importPfForm' );
    var fileName= f.datafile.value;   
}

それでは、どのようにしてそのファイル内のデータを取得できますか？

javascripthtmlajaxfile-upload
41
Dinoop Nair

新しいHTML 5ファイルAPIを使用してファイルの内容を読み取ることができます

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

ただし、これはすべてのブラウザで機能するわけではないため、おそらくサーバー側のフォールバックが必要です。

22
Woody

以下の例は、html5rocksソリューションに基づいています。ブラウザのFileReader（）関数を使用します。新しいブラウザのみ。

http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files を参照してください

この例では、ユーザーはHTMLファイルを選択します。 <textarea>にアップロードしました。

<form enctype="multipart/form-data">
<input id="upload" type=file   accept="text/html" name="files[]" size=30>
</form>

<textarea class="form-control" rows=35 cols=120 id="ms_Word_filtered_html"></textarea>

<script>
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // use the 1st file from the list
    f = files[0];

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
        return function(e) {

          jQuery( '#ms_Word_filtered_html' ).val( e.target.result );
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsText(f);
  }

  document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
40
Andrew Murphy

以下の例は、アップロードされたファイルの内容を読み取るためのFileReaderの基本的な使用法を示しています。 この例の実用的なプランカーです。

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>

  <body onload="init()">
    <input id="fileInput" type="file" name="file" />
    <pre id="fileContent"></pre>
  </body>
</html>

script.js

function init(){
  document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(event){
  const reader = new FileReader()
  reader.onload = handleFileLoad;
  reader.readAsText(event.target.files[0])
}

function handleFileLoad(event){
  console.log(event);
  document.getElementById('fileContent').textContent = event.target.result;
}
1
Mark Lagendijk