使用javascript从文本文件中读取值

时间:2013-02-22 08:37:39

标签: javascript file onclick text-files

  • 我的本地计算机上有一个文本文件。
  • 我在jsp页面上有一个按钮。
  • 点击按钮,我需要获取文本文件内容。
  • 该文件有n个内容。

任何人都可以给我javascript函数来实现这一点。

1 个答案:

答案 0 :(得分:1)

您应该在问题中指明您希望客户端文件读取,因为我看到很多都是指服务器端读取。

你应该看看FileAPI - 一个HTML 5 Javascript添加,允许JavaScript通过文件输入读取文件内容。

我正在为您编写代码示例 - 但这是一个很好的网站,您应该阅读

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])});