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

Question

所以我对 Web 开发的世界还很陌生，我正在做一个项目，我希望用户在 returned 另一个文件之前上传一个 .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 中 return 一个新文件？有可能吗？

谢谢

Answer 1

为此，您需要使用 Javascript 文件 Reader。

首先，您需要从输入元素中获取文件：

//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();

然后你想告诉 FileReader 当它读完你的文件后要做什么。这可以是您想要的任何函数，它位于您想要对文件执行任何操作的 onload 函数中。

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

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

reader.readAsBinaryString(file)

如果您想了解更多信息，可以查找信息 here。

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

我在 http://jsfiddle.net/fdxw2p5f/1/

中有上述所有内容的示例

Answer 2

请注意：JavaScript 是一种客户端脚本语言，也就是说，它只能在客户端的机器上运行。如果你使用JS处理一个文件，那意味着你没有上传它，因为上传是指将文件发送到服务器。

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

How do I upload a file via HTML before passing it to a Javascript function?

html

javascript

upload

file

function