文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5读取文件

问HTML5读取文件
EN

Stack Overflow用户

提问于 2014-10-15 16:59:49

回答 1查看 70关注 0票数 0

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

我的代码可以在这里找到：http://jsfiddle.net/5sy076n5/1/。

<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>

您可能会注意到，我的body中没有输入标记。这是因为我希望用户点击标签而不是文本。

我的问题是在fileSector.click()；之后我应该做什么？我怎样才能知道选择了什么文件？

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2014-10-15 17:17:24

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

您可以简单地使用这个变量来FileReader API。

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26378465

复制

相似问题

问HTML5读取文件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5读取文件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5读取文件
EN