如何在我的 HTML 代码和 return 输出中使用 pyscript

Question

我正在尝试调用我创建的 python 函数。但是没有得到任何输出，也没有资源如何实现。

代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>

<p>Click on the "Choose File" button to upload a file:</p>

<form>
  <input  type="file" id="myFile" name="filename">
  <input type="submit" onClick="readfile(filename)" name="SUBMIT">
</form>

<py-script>

def readfile(filename):
    with open(filename) as mfile:
        head = [next(mfile) for x in range(1,5)]
        print(head)

</py-script>

</body>
</html>

如果有人提供像……这样的输入将会很有帮助

如何将选定的文件传递给我的函数，python 将被执行并在屏幕上输出 return。

Answer 1

在浏览器中编写Python时，您必须重新考虑操作的执行方式。通常，Python 程序是过程性的。 Browser-based 应用程序是异步的。

第一步是启用异步功能：

import asyncio

基于浏览器的程序无法直接访问本地文件系统。您的代码没有按照您的想法行事。

def readfile(filename):
    with open(filename) as mfile:
        head = [next(mfile) for x in range(1,5)]
        print(head)

您的代码正在从允许的浏览器虚拟文件系统中读取。您正在尝试处理来自 ` 元素的事件，但试图访问不同的位置。

注意：我不知道"filename"的文件内容是什么，所以读取文件后没有合并你的代码。

您的代码无法读取文件。您必须要求浏览器为您的应用程序读取文件。这是使用 FileReader class.

执行的

示例：

async def process_file(event):
        # Currently, PyScript print() does not work in this 
        # type of code (async callbacks)
        # use console.log() to debug output

        fileList = event.target.files.to_py()

        for f in fileList:
                data = await f.text()
                document.getElementById("content").innerHTML = data
                # Add your own code to process the "data" variable
                # which contains the content of the selected file

另一个问题是您将 Python 函数作为回调传递。这是行不通的。相反，您必须调用 create_proxy() 为 Python 函数创建回调代理。浏览器将调用代理，然后代理调用您的 Python 函数。

示例：

# Create a Python proxy for the callback function
# process_file() is your function to process events from FileReader
file_event = create_proxy(process_file)

# Set the listener to the callback
document.getElementById("myfile").addEventListener("change", file_event, False)

我将此解决方案的副本放在我的网站上。您可以在页面right-click下载源码。

File Example Demo

完整的解决方案：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>File Example</title>
</head>
<body>

<p>This example shows how to read a file from the local file system and display its contents</p>
<br />
<p>Warning: Not every file type will display. PyScript removes content with tags such as XML, HTML, PHP, etc. Normal text files will work.</p>
<br />
<p>No content type checking is performed to detect images, executables, etc.</p>
<br />
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br />
<br />
<div id="print_output"></div>
<br />
<p>File Content:</p>
<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:600px; resize:both">
  <div id="content">
  </div>
</div>

<py-script output="print_output">
import asyncio
from js import document, FileReader
from pyodide import create_proxy

async def process_file(event):
    fileList = event.target.files.to_py()

    for f in fileList:
        data = await f.text()
        document.getElementById("content").innerHTML = data

def main():
    # Create a Python proxy for the callback function
    # process_file() is your function to process events from FileReader
    file_event = create_proxy(process_file)

    # Set the listener to the callback
    e = document.getElementById("myfile")
    e.addEventListener("change", file_event, False)

main()
</py-script>

</body>
</html>

如何在我的 HTML 代码和 return 输出中使用 pyscript

How do I use pyscript in my HTML code and return output

html

css

python

pyscript