Fatal编程技术网

Javascript HTML5读取文件

javascript jquery html

Javascript HTML5读取文件,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试开发一个应用程序，它允许用户选择一个文件，然后读取它并在屏幕上显示文本 我的代码可以在这里找到： 您可能会注意到，我的主体内没有输入标记。这是因为我希望用户单击标记而不是文本 我的问题是在fileSector.click；之后我应该做什么；？如何获取所选的文件？您已经在运行时创建了输入元素，并且有了它的引用fileSelector 您可以简单地使用此变量创建FileReader API 你查过了吗？是的，我知道我必须这么做。唯一的问题是如何使用带有标记的文件系统。上传一个文档后，它不会

我正在尝试开发一个应用程序，它允许用户选择一个文件，然后读取它并在屏幕上显示文本

我的代码可以在这里找到：

您可能会注意到，我的主体内没有输入标记。这是因为我希望用户单击标记而不是文本

我的问题是在fileSector.click；之后我应该做什么；？如何获取所选的文件？

您已经在运行时创建了输入元素，并且有了它的引用fileSelector

您可以简单地使用此变量创建FileReader API

你查过了吗？是的，我知道我必须这么做。唯一的问题是如何使用带有标记的文件系统。上传一个文档后，它不会发生任何事情：您只需选择.txt文件并查看结果。上传文档后，您指的是什么？演示很清楚地说明了这一点。。我试图打开一份文件，抱歉我的错误。也可以在文档上完成，还是仅在文本文件上完成？什么类型的文档？这是你的电话号码。您可以从readAsBinaryString中读取任何二进制文档数据，如pdf，也可以使用我希望读取的文档类型为.doc和.pdf。当我使用readAsBinaryString时，文本显示为垃圾 
<html>
  <head>
    <title>FileReader Example</title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script type="text/javascript" charset="utf-8">



        function testRead() {

            var fileSelector = document.createElement('input');
            fileSelector.setAttribute('type', 'file');

            fileSelector.click();


        }

    </script>
      </head>
      <body>
        <h1>Example</h1>
        <p>Read <a onClick="testRead();">File</a></p>
      </body>
    </html>

function testRead() {
    var fileSelector = document.createElement('input');

    fileSelector.setAttribute('type', 'file');

    fileSelector.click();

    fileSelector.addEventListener('change', function () {
        var file = fileSelector.files[0];

        var reader = new FileReader();
        reader.onload = function (e) {
            var text = reader.result;
            console.log(text);     // Select *.txt file and see console
        }

        reader.readAsText(file);
    });
}