javascript从txt文件读取并将文本注入表单

我提前道歉，因为我是一个完全的初学者。 我有一个预先存在的带有文本字段的html表单。我需要有一个按钮，可以让我上传一个txt文件，因为当我试图寻找关于这个问题的答案时，我了解到javascript不能只从我的PC访问一个文件，而不主动上传它。然后我需要将这个txt文件中的值插入到文本字段中，例如，表单有：name、last name、phone等，文件将填写这些信息

---

我想从别人的问题中收集点点滴滴，真是疯了。任何帮助都将不胜感激

这取决于您希望如何处理此问题，基本上有两种选择：

文件上载和页面重定向

您可以提供一个文件上载表单来上载文本文件，通过表单提交重定向到同一页面，在服务器端处理数据，例如解析文件并从中获取值，并让服务器将这些值作为表单文件的默认属性注入到浏览器中

XMLHttpRequest文件上载

在现代浏览器中，原生xhr对象支持upload属性，因此您可以通过该upload属性发送文件。它必须被发送到服务器端脚本，该脚本解析文件并以合适的格式返回值，例如json，它看起来像：{'name'：'somename'，'lastName'：'someothername'}。然后，您必须在完成此上载时注册eventlistener，例如onload，并在javascript端设置这些值

我认为XMLHttpRequest上传更好的解决方案，请查看以下内容：

编辑： 最简单的解决方案就是提供一个textfield并将文件内容粘贴到这个字段中，点击一个按钮，然后解析内容。这样，您就不会依赖网络流量甚至服务器端处理，而是可以使用javascript完成所有操作，例如： dom:

编辑：从我在评论中发布的链接：

<!-- The HTML -->
<input id="the-file" name="file" type="file">
<button id="sendfile">send</button>

---

如前所述，您的服务器端在给出一些建议之前必须解析文件并使用json作出响应，您是否使用了任何服务器端框架，如果是，是什么？为什么要使用文本文件，这是一个要求还是您的问题解决方案？对我来说，这听起来并不理想，所以如果你描述一下你用这个解决的问题，也许可以找到更好的方法。嗯，我的机器上安装了glassfish，我用intelliJ创建了war，并将它部署到服务器上。我不是100%肯定我在回答你的问题。我的任务是能够用我的凭据或任何其他凭据填写预先存在的表单-它必须可以通过单击按钮为不同的用户更改。谢谢@Jareth，这让我们更接近了。有许多用于预填充表单的浏览器扩展。这回答了服务器部分，我仍然不确定为什么要上传文本文件。为什么它们不是一个可接受的解决方案？如果这不起作用，你应该跳过html表单，在你的服务器上创建一个新的端点，它接受这样一个文本文件并解析细节，然后将它们用于与表单提交相同的操作。也许显示或描述一些服务器代码会很有用。嘿，LcLk，不幸的是，这是一个挑战。我必须使用现有的表单，它是我们开发的测试应用程序的一部分，还具有其他功能。你的第二个建议听起来和我想要的一模一样！我还不确定我是否知道如何让它像我说的那样工作……一个初学者，但它给了我一个很好的起点。谢谢关于如何使用xhr upload对象，这里有一个很好的解释：您还可以查看这个链接，了解glassfish上上传文件处理的实现：我知道input=file允许我上传文件，但主要问题是如何将其中的信息添加到表单内的文本字段中。对不起，我有点糊涂，这是我第一次做这样的事。谢谢！我可能需要一个月的时间才能在现有代码中工作，但这是一个很好的起点！

var tf = document.getElementById("tf");
document.getElementById("parse").addEventListener("click", function(){
    var formData = JSON.parse(tf.value);
    //if your textfile is in json format, the formData object now has all values
});

<!-- The HTML -->
<input id="the-file" name="file" type="file">
<button id="sendfile">send</button>

document.getElementById('sendfile').addEventListener("click", function(){
    var fileInput = document.getElementById('the-file');
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('file', file);
    var xhr = new XMLHttpRequest();
    // Add any event handlers here...
    xhr.open('POST', '/upload/path', true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var values = JSON.parse(xhr.responseText);
            //these are your input elements you want to fill!
            formNameInput.setAttribute('value', values.name);
            formFirstNameInput.setAttribute('value', values.firstName);
        }
    }
    xhr.send(formData);
});