index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PyScript Test</title>
    <link rel="stylesheet" href="/static/pyscript/v2023.05.1/pyscript.css"/>
    <script defer src="/static/pyscript/v2023.05.1/pyscript.js"></script>
</head>
<body>
<py-config src="./py-config.toml"></py-config>
<py-repl id="py-repl" output="replOutput"></py-repl>
<div id="replOutput"></div>
<input type="file" id="uploadFile" accept="image/png">
<script>
    let imgName;
    const uploadFileInput = document.getElementById('uploadFile');
    uploadFileInput.addEventListener('change', function() {
        const files = uploadFileInput.files;
        if (files.length > 0) {
            imgName = files[0].name;
            console.log(imgName);
        }
        /*
        const file = uploadFileInput.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = function() {
            const imagePath = reader.result;
            console.log(imagePath);
            // 在这里你可以将路径赋值给一个变量、显示到页面上等操作
        };
        */
    });
    function runPython(){
        run = pyscript.interpreter.globals.get("run");
        run(imgName);
    }
</script>
<!--<button py-click="run()">RUN</button>-->
<button onclick="runPython()">RUN</button>
<py-script src="./main.py"></py-script>
<py-terminal style="overflow: auto; max-height: 100px;"></py-terminal>
<div id="mpl"></div>
</body>
</html>