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事件来完成。例如：你可以像下面这样打电话：

.controller('DateController', function($scope) {

  $scope.$on('datepicker.selectWeekday', function(event, newVal) {
    $scope.selectedWeekday = newVal;
  });

});

Answer 4

回复文档的ready事件：

$(document).ready( loadFileAsText );

如果您不想使用jQuery与多个浏览器轻松兼容，请参阅以下答案：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

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

4 个答案: