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

Question

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

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

到目前为止，我已经获得了一些代码片段以用于我的代码的某些部分：

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

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

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

Input-type: 上传按钮的文件表单 因为我在当前文件中有JS代码，如何让表单不发送数据到另一个 php 文件？

<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 文件中，其中包括上传文件、读取文件内容并存储在变量中，以及进一步处理内容。这样的事情可以做吗？我是 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" />

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

How to not make inputType-file send data to another php file?

html

javascript

php

input-type-file