1

csv をアップロードできるアプリケーション用の小さなバックエンドを作成しました。csv を調べて JSON に解析する必要があります。これには PapaParse を使用しており、1 つのファイルを実行できます。ただし、複数のファイルをアップロードして解析する必要があります。ファイルをアップロードできますが、すべてのファイルを選択する方法がわかりません。

これが私のコードです：HTML

<form class="import">
        <div class="form-group">
            <input type="file" class="form-control-file" id="fileToRead" multiple>
            <small id="fileHelp" class="form-text text-muted">You can enter one day or multiple days. Please see another import for anything other than daily data</small><br>
        </div>
    <!-- this line... the id is in the importData.js file, overflow-y: auto is what makes this section scrollable-->
    <p id="editor" style="border: 1px black dotted; width: 100%; height: 200px; overflow-y: auto;">Hopefully see something here</p>
    </form>

js ファイルは次のとおりです。

//Getting the document by the ID and when something changes it runs the function
document.getElementById("fileToRead").addEventListener("change",function(){
    //creates a var for the first file.



 var files = this.file[0]

       Papa.parse(files, {
       header:true,
       dynamictyping:true,
       complete:function(results){
           console.log(results);
           var data = results.split;
           document.getElementById("editor").innerHTML = data;
       }
       });
    //this prints the value of the evt.target.result (which is another pre-defined JS object that runs with
    //FileReader woo hoo!)  this has to have .innerHTML becuase I have a <p> tag, when it was a <textArea> it had
    // to have .value

  });

ファイル0のみを選択するJSの最初の行と関係があると確信していますが、空の括弧と他のいくつかのことを試しましたが、まだ1つのオブジェクトしか出力しません。

4

1 に答える 1

0

わかりましたので、私はそれを理解しました。すべてのドキュメントをループする方法について混乱していましたが、これを修正したコードを次に示します。

document.getElementById("fileToRead").addEventListener("change",function(){
//creates a var for the first file.
//Gets the number to loop through
var input = document.getElementById("fileToRead");
console.log(input.files.length);
for(var i = 0; i < input.files.length; i++){
    var files = input.files[i];
               Papa.parse(files, {
               header:true,
               dynamictyping:true,
               complete:function(results){
                   console.log(results);
                   document.getElementById("editor").innerHTML = "stuff";
               }
               });

1) すべてのファイルを取得する input という変数を作成します。

2）すべてのファイルを取得していることがわかるように、console.log に記録します。その入力ですべてのファイルを探しているため、files.length を入力に追加する必要があります。files は、使用できる定義済みの単語です。

3) 次に、console.log に対して行ったように、input.files.length を使用してファイルをループしました。変数を作成できたと思いますが、何でも構いません。

4) for ループ内の var ファイルは [i] で使用されます。これは、for ループが通過するときに [i] の値が入力されるためです。これは 0 から始まるため、最初のドキュメントから開始し、残りを何も残っていません。

5) PapaParse を使用してファイルを調べます。

競合: 関数 (結果) の部分では、console.log を使用しているので、コードがここに落ちたことがわかります。最後のコード document.getElementByID は、出力内容を確認したかったためです。これは現在機能していませんが、「そこにあるもの」を出力します。

これが、このようなことをしようとしている他の誰かに役立つことを願っています。

于 2016-08-27T14:54:04.783 に答える