3

我试图掌握 HTML5 中的文件 API，以便在浏览器中访问本地文件。我发现了一些其他关于此的 SO 问题，甚至在这里找到了一个很好的指南，用于在本地选择文件。

但是，我确实需要能够以这种方式访问​​文本文件并将它们打印在屏幕上，就像在 textarea 元素中一样。有谁知道这是怎么做到的？例如，我想读入带有单行文本的平面文本文件并在 textarea 中打印内容。

谢谢您的帮助！

4

3 回答 3

3

尝试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


</head>
<body>

<input type="file" id="files" name="file" /> Read bytes: 
<textarea id="output"></textarea>

<script>
    function handleFileSelect(evt) {
        var files = document.getElementById('files').files;
        if (!files.length) {
          alert('Please select a file!');
          return;
        }

        var file = files[0];
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                document.getElementById('output').textContent = evt.target.result;
            }  
        };
        reader.readAsText(file, "UTF-8");
    }


document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
于 2013-10-13T04:21:19.917 回答
2

按照您提到的教程进行操作，但是当您读取文本文件时FileReader.readAsText，请将该文件作为文本而不是二进制文件读取，然后将该文本存储为文本区域表单元素的值。

如果您无法使其正常工作，请在您的实际代码尝试中发布一个问题，以及究竟什么不起作用。

于 2013-10-13T04:10:25.893 回答
2

您可以使用 FILE API 执行此操作：

例如：

HTML：

<tr>
    <td>Select a File to open:</td>
    <td><input type="file" id="fileToLoad"></td>
    <td><button onclick="loadFileAsText()">Load Selected File</button><td>
</tr>

和javascript：

function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) 
{
    var textFromFileLoaded = fileLoadedEvent.target.result;
    document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
于 2013-10-13T04:12:28.133 回答