Question

我提前道歉，因为我是一个初学者。我有一个预先存在的带有文本字段的html表单。我需要一个按钮，允许我上传一个txt文件（因为当我试图寻找这个答案时，我学会了javascript不能只是从我的电脑上访问文件而没有我主动上传它）。然后我需要将此txt文件中的值插入到文本字段中（例如，表单包含：姓名，姓氏，电话等 - 文件将填写此信息）。

我疯狂地试图从其他人的问题中收集点点滴滴。任何帮助将不胜感激！

Answer 1

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

文件上传和页面重定向

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

XMLHttpRequest文件上传

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

检查XMLHttpRequest上传（我认为更好的解决方案）：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files

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

<textarea id="tf"></textarea>
<button id="parse">fill form!</button>

js：

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);
});

如前所述，您的服务器端必须解析文件并使用json

进行响应

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

1 个答案: