3

ブラウザーでローカル ファイルにアクセスするための HTML5 のファイル API を把握しようとしています。これに関する他のSOの質問をいくつか見つけました。また、ローカルでファイルを選択するための素晴らしいガイドも見つけました。

ただし、この方法でテキスト ファイルにアクセスし、textarea 要素のように画面に表示できるようにする必要があります。これがどのように行われるか知っている人はいますか？例として、1 行のテキストを含むフラット テキスト ファイルを読み込んで、その内容をテキストエリアに出力したいと考えています。

助けてくれてありがとう！

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 に答える