如何使用PyScript获取HTML表单上传的TXT文件内容？

浏览器出于安全限制，不会暴露用户本地文件的真实路径，所以Element("studentList").value只能拿到类似C:\fakepath\filename.txt的虚拟路径。要读取文件实际内容，得结合浏览器的File API和PyScript的异步处理能力，具体实现如下：

步骤1：修改按钮类型（可选但推荐） #

把表单里的submit按钮改为button类型，避免触发表单默认提交刷新页面：

<input
  type="button"
  id="button"
  class="btn btn-primary"
  py-click="test()"
  value="Display Tables"
/>

步骤2：修改PyScript代码读取文件内容 #

更新你的test函数为异步函数，通过原生DOM元素的files属性获取文件对象并读取内容：

<py-script>
async def test():
    # 获取输入的表格数量
    table_count = Element("numberOfTables").value
    # 获取文件输入框的原生DOM对象
    file_input = Element("studentList").element
    
    # 检查是否选中了文件
    if file_input.files.length > 0:
        # 获取第一个选中的文件
        student_file = file_input.files[0]
        # 异步读取文件的文本内容
        file_content = await student_file.text()
        
        # 这里添加你的算法逻辑，比如解析学生列表数据
        print("读取到的学生数据：")
        print(file_content)
        
        # 示例：将内容展示到页面的fileInput容器中
        Element("fileInput").write(f"<pre>{file_content}</pre>")
    else:
        # 提示用户选择文件
        Element("fileInput").write("<span style='color:red'>请先选择一个TXT文件</span>")
</py-script>

关键说明 #

• 使用Element("studentList").element获取原生HTML元素，才能访问files属性拿到File对象
• file.text()是异步方法，必须搭配await使用，因此函数要定义为async def
• PyScript的py-click支持调用异步函数，无需额外处理

内容的提问来源于stack exchange，提问作者Rohan Jain