Question

我有以下代码。在那我显示正常文本。取而代之的是我想

加载本地文本文件。

我无法加载本地文本文件。

在这里，我想在选择选项a时从textarea中的主文件夹加载a.txt文件的内容。等等。

<html>
<body>

<div class="left">
File Display
<p>

<select class="x" onchange="showfile(this);"> 

<option selected="selected" value="" id="Templates">Please select an option</option>

<option>a</option>

<option>b</option>

<option>c</option>

<option>d</option>

</select>

</p>

<p>

<textarea cols="30" rows="20" readonly="readonly" id="textar">

</textarea>

</p>

</div>

<script>

function showfile(sel){   

files =[ "", 

/*option a*/                 

"display file a.txt ",

/*option b*/                

" display file b.txt ",

/*option c*/                 

" display file c.txt",

/*option d*/                 

"display file d.txt", ];

                   srcfile = files    [sel.selectedIndex];    

   if (srcfile != undefined && srcfile != "") {      

                  document.getElementById('textar').innerHTML= srcfile;   

 } 

}

</script>

</body>
</html>

Answer 1

更新

使用FileReader API：

来源：

HTML

<div id="page-wrapper">

    <h1>Text File Reader</h1>
    <div>
        Select a text file: 
        <input type="file" id="fileInput">
    </div>
    <pre id="fileDisplayArea"><pre>

</div>

JS

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerText = reader.result;
            }

            reader.readAsText(file);    
        } else {
            fileDisplayArea.innerText = "File not supported!"
        }
    });
}

我想在选择下拉选项时显示本地文本文件

1 个答案: