1
  • ローカル マシンにテキスト ファイルがあります。
  • そして、jspページにボタンがあります。
  • ボタンをクリックすると、テキスト ファイルの内容を取得する必要があります。
  • ファイルには n 個のコンテンツがあります。

これを達成するためのJavaScript関数を誰かに教えてもらえますか。

4

1 に答える 1

1

多くの場合、サーバー側の読み取りについて言及しているため、クライアント側のファイル読み取りが必要であることを質問で指定する必要があります。

JavaScript がファイル入力を介してファイル コンテンツを読み取れるようにする HTML 5 Javascript の追加である FileAPI を確認する必要があります。

私はあなたのためにコード例に取り組んでいます-しかし、ここにあなたが読むべき良いサイトがあります

http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=4Fhi9T4mEAA

FileAPI がなくても、target="some iframe" を使用してファイル入力フィールドをフォームで使用できます。その後、サーバーにファイルをアップロードさせ、テキストを返します。( FormData では Ajax でファイルをアップロードできますが、すべてのブラウザーでサポートされているわけではありません)。

したがって、File API はあなたの方法です File API でそれを行う方法は次のとおりです。

<input type="file"/>
<script>
$(function(){
            $("input").change(function(e){
                    console.log(["file changed",e]);
                var myFile = e.target.files[0];
                var reader = new FileReader();
                reader.onload = function(e){
                    console.log(["this is the contents of the file",e.target.result]);
                };
                reader.readAsText(myFile)

            });
        }
)
</script>

ドラッグ/ドロップ インターフェイスを実装することもできます (Google gmail のように)

        $("div").on("dragover",function(e){
            e.dataTransfer = e.originalEvent.dataTransfer;
                e.stopPropagation();
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

        }).on("drop",function(e){
                    e.dataTransfer = e.originalEvent.dataTransfer;
                    e.stopPropagation();
                    e.preventDefault();
                    console.log(["selected files", e.dataTransfer.files])});
于 2013-02-22T08:50:02.357 に答える