gpt4 book ai didi

javascript - 自动加载文件,无需使用单击按钮

转载 作者:行者123 更新时间:2023-11-27 23:51:07 24 4
gpt4 key购买 nike

我是 javascript 新手,想要加载文件而无需单击加载文件按钮

我正在使用以下脚本,我希望文本自动加载到文本框中。

<html>
<body>
<table>
<tr>
<td>Select a File to Load:</td>
<td>
<input type="file" id="fileToLoad">
</td>
<td>
<button onclick="loadFileAsText()">Load File</button>
<td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
</td></tr>
</tr>
</table>
</body>
</html>

<script type='text/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");
}
</script>

预先感谢您的帮助。

最佳答案

尝试添加 onchange 属性,这将在对该输入进行更改时调用函数。

<input type="file" id="fileToLoad" onchange="loadFileAsText()">

Demo

function loadFileAsText(){
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent){
document.getElementById("inputTextToSave").value = fileLoadedEvent.target.result;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
<table><tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad" onchange="loadFileAsText()"></td>
<!-- ^^ onchange attribute added ^^ -->
</tr><tr>
<td colspan="2"><textarea id="inputTextToSave" style="width:512px;height:256px"></textarea></td>
</tr></table>

如果您对上述源码有任何疑问,请在下面留言,我会尽快回复您。

我希望这有帮助。快乐编码!

关于javascript - 自动加载文件,无需使用单击按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32701374/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com