无需单击按钮即可自动加载文件

Question

我是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>

先谢谢您的帮助。

Answer 1

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

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

演示

 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>

如果您对以上源代码有任何疑问，请在下面发表评论，我们将尽快与您联系。

我希望这有帮助。 编码愉快！

Answer 2

您可以像这样单独调用函数：

loadFileAsText();

Answer 3

您可以使用Javascript事件来实现。 例如：您可以拨打以下电话：

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

Answer 4

响应文档的ready事件：

$(document).ready( loadFileAsText );

如果您不希望使用jQuery与多个浏览器实现简单兼容性，请参见以下答案：纯JavaScript等效于jQuery的$ .ready（）如何在页面/ dom准备就绪时调用函数

无需单击按钮即可自动加载文件

问题描述

4 个解决方案

解决方案1
1 已采纳 2015-09-21 18:14:47

解决方案2
0 2015-09-21 17:42:13

解决方案3
0 2015-09-21 17:44:36

解决方案4
0 2015-09-21 17:45:08

无需单击按钮即可自动加载文件

问题描述

4 个解决方案

解决方案1 1 已采纳 2015-09-21 18:14:47

解决方案2 0 2015-09-21 17:42:13

解决方案3 0 2015-09-21 17:44:36

解决方案4 0 2015-09-21 17:45:08

解决方案1
1 已采纳 2015-09-21 18:14:47

解决方案2
0 2015-09-21 17:42:13

解决方案3
0 2015-09-21 17:44:36

解决方案4
0 2015-09-21 17:45:08