在将文件传递给Javascript函数之前，如何通过HTML上传文件？

因此，我对网络开发非常陌生，我正在做一个项目，希望用户在返回另一个包含编辑版本的文件之前上传一个.txt文件。我发现的困难在于JS的文件处理能力似乎有限

到目前为止，我的想法是，我有一个HTML表单，用户通过该表单上传他们的文件和一个.js函数调用，如下所示：

<form action="demo_form.asp">
    <input type="file" name="randomfile" id="rand">
    <br/>
    <input type="submit" value="Submit">
</form>

<script type="text/javascript" src="fileEditor.js">
</script>

我的问题是，如何利用.js函数的文件内容，以及如何从该javascript返回新文件？有可能吗

---

谢谢您，您可能想使用Javascript文件读取器

首先，您希望从输入元素获取文件：

//Gets files from document element
var files=document.getElementById('rand').files;
//Selects first File and assigns it to file
var file=files[0];

然后您需要创建文件读取器：

var reader = new FileReader();

然后，您需要告诉文件阅读器在读取完您的文件后要做什么。这可以是您想要的任何函数，并且在onload函数中，您想要对文件执行任何操作

reader.onload=function(evt){
    //Prints contents of first file to the console
    console.log(evt.target.result)
}

最后，您需要告诉filereader实际读取文件：

reader.readAsBinaryString(file)

如果你想要更多的信息，你可以找到信息

编辑： 同时查看代码，默认情况下页面将刷新。我建议在提交按钮的onclick上添加读取文件的函数

---

我在

上有一个以上所有内容的示例，只需注意：JavaScript是一种客户端脚本语言，即它只在客户端机器上工作。如果您使用JS处理文件，这意味着您没有上载文件，因为上载是指将文件发送到服务器。

是，但HTML表单会刷新页面。如果您不想刷新页面，您将希望通过AJAX请求提交文本文件。我可以看到这种方法适用于我需要做的事情，尽管我想知道您的id=“contents”标记在提供的示例中实际起什么作用。它将删除您上载的任何文件的内容。尝试上载文本文件。它并不适用于所有类型的文件，但应该适用于大多数.txt文件。从HTML中调用脚本的位置是什么？我的代码无法正常工作。哦，对不起，我想我在代码中没有说得很清楚。这是一行

document.getElementById（'sub'）。onclick=readFile设置它，以便在单击所选按钮时执行函数“readFile”。如果你想用
，你也可以在内联中添加它。啊，我想是这样的。我不确定，因为我以为你必须用HTML打电话。有没有任何方法可以使用此代码获取给定文件的内容并生成新文件？我知道标准JS不能处理文件，但如果它使用了一些NodeJS库？