如何不让输入类型文件将数据发送到另一个 php 文件？

Question

我正在尝试构建一个只做三件事的页面：

• 让用户选择一个文件（具体来说是一个.json文件）
• 只需读取文件的内容并将它们存储在一个变量中。 （不要存放在任何地方）
• 使用 Javascript 进一步处理内容变量。 （我将使用 JS 将文件转换为 XML。我已经准备好转换代码并且可以工作，它只需要从文件内容变量中获取的 json 字符串。转换为 XML 后，我'将导出 XML 文件以便用户下载它，并将其导入我的 MS Excel 表中，该表具有用于填充数据的 XML 映射。[我还没有想出导出选项]）

到目前为止，我已经获得了一些 code-sn-ps 用于我的代码的某些部分：

在 JS 中访问 php 变量（包含内容）：

<?php
$somevar = 'Hi Thunkable!';
?>

<script>
var msg = <?php echo $somevar; ?>;
.... process the variable further
</script>

Input-type: 上传按钮的文件表单 由于我在当前文件中有JS代码，如何使表单不向另一个php文件发送数据？ em>

<form enctype="multipart/form-data" action="__URL__" method="POST">
    Send this file: <input name="userfile" type="file" />
    <input type="submit" value="Send File" />
</form>

对我来说唯一剩下的就是我上面所说的，而不是将上传的文件数据发送到另一个 PHP 文件，而是将其存储在一个变量中。我发现$txt = file_get_contents($_FILES['userfile']['tmp_name']); 可以从文件中获取内容。

总结一下，我只是想将我的所有代码保存在一个 HTML 文件中，其中包括上传文件、读取其内容并存储在 var. 中，以及进一步处理内容。这样的事情可能吗？我是 PHP/HTML/JS 的初学者，所以我想不出任何关于我的问题要事先搜索的内容...

Answer 1

您可以使用对象 FileReader 从输入类型文件中读取文件

示例如下：

(function(){
    
    function onChange(event) {
        var reader = new FileReader();
        reader.onload = (event)=>{
          alert(event.target.result);
          let data = JSON.parse(event.target.result);
          //process the data here
          console.log(data);
        }
        reader.readAsText(event.target.files[0]);
    }
 
    document.getElementById('file').addEventListener('change', onChange);

}());

<input id="file" type="file" accept="application/JSON" />