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

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

javascript

Javascript 无需单击按钮即可自动加载文件,javascript,Javascript,我是javascript新手，希望加载文件而不必单击“加载文件”按钮我正在使用以下脚本，我希望文本自动加载到文本框中 <html> <body> <table> <tr> <td>Select a File to Load:</td> <td> <inpu

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


选择要加载的文件：
加载文件
函数loadFileAsText（）
{
var fileToLoad=document.getElementById（“fileToLoad”）.files[0]；
var fileReader=newfilereader（）；
fileReader.onload=函数（fileLoadedEvent）
{
var textFromFileLoaded=fileloadevent.target.result；
document.getElementById（“inputTextToSave”）.value=textFromFileLoaded；
};
readAsText（fileToLoad，“UTF-8”）；
}

提前感谢您的帮助。

您可以自己调用函数，如下所示：

loadFileAsText();

您可以使用Javascript事件来完成。例如：您可以按如下方式呼叫：

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

响应文档的

ready

事件：

$(document).ready( loadFileAsText );

如果您不想使用jQuery实现与多个浏览器的简单兼容性，请参见以下回答：

尝试添加

onchange

属性，当对该输入进行更改时，这将调用函数

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


选择要加载的文件：

谢谢您的评论。然而，我仍然不知道该怎么办。您可以修改代码吗？只需将其添加到脚本文件

window.onload=loadFileAsText谢谢@涡轮科技公司。我确信代码中也必须删除一些内容。。我不确定你为什么要在页面加载后运行该函数？由于客户端尚未选择文件，因此输入将为空…不确定@NewToJS是什么意思。客户端通过按“选择文件”按钮选择文件来选择文件。我试图加载一个现有文件，然后通过6个单选按钮获得一些输入后修改该文件。现在代码中包含了一个“加载按钮”，用于加载我想要删除的文件。感谢@Manju的响应。因为我是javascript新手，所以确切的代码应该是什么样子的。如果你能帮忙的话…我刚刚浏览了你的代码，基本上你正在尝试读取文件数据并显示它。但是loadFileAsText（）函数还没有做到这一点。请检查我输入的读取文件数据和显示它的确切代码，以便于理解。也许你也能帮上忙。你可以在中阅读更多关于文件操作的信息，如果上面的代码对你有用，你能把它标记为已回答吗？非常好。非常感谢……：）