Question

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

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

感谢您的帮助！

Answer 1

试试这个

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

Answer 2

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

如果您无法使用此功能，请使用您的实际代码尝试发布问题，以及哪些内容无效。

Answer 3

您可以使用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");
}

如何使用html5输入本地文件并在屏幕上输出文件？

3 个答案: