在 Python 中将捕获的 WebCam 文件名显示到下一页（Flask）-解网

问：

我正在尝试从网络摄像头捕获图像，并在用户单击“上传”按钮时在下一页上显示其文件名。目前，捕捉功能正在拍摄图像并工作正常。但是当用户单击“上传”按钮时，什么也没发生。

预期输出：单击“上传”按钮将打开一个新页面（Test2）并显示文件名。

我的代码

app.py

@app.route('/Test', methods=['GET','POST'])
def Test():
    if request.method == 'POST':
        return render_template('Test2.html',data=request.form['file'])
    return render_template('Test.html')

if __name__ == '__main__':
app.run(debug=True)

测试.html

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebcamJS Test Page</title>
    <style type="text/css">
        body { font-family: Helvetica, sans-serif; }
        h2, h3 { margin-top:0; }
        form { margin-top: 15px; }
        form > input { margin-right: 15px; }
        #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
    </style>
</head>
<body>
    <div id="results">Your captured image will appear here...</div>
    
    <h1>WebcamJS Test Page</h1>
    <h3>Demonstrates simple 320x240 capture &amp; display</h3>
    
    <div id="my_camera"></div>
    
    <!-- First, include the Webcam.js JavaScript Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js" integrity="sha512-dQIiHSl2hr3NWKKLycPndtpbh5iaHLo6MwrXm7F0FM5e+kL2U16oE9uIwPHUl6fQBeCthiEuV/rzP3MiAB8Vfw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>   
    <form method="POST" enctype="multipart/form-data" id="myForm">
        <table>
            <tr>
                <td>Name/EmailId</td>
                <td>:  <input type="text" name="userID"></td>
            </tr>
            <tr>
                <td><input type="button" value="Upload" onclick="upload()"></td>
            </tr>
        </table>
    </form>
    <div id="my_camera"></div>
    <input type="button" onclick="snap()" value="Snap">
    <div id="results"></div>
    
    </body>
<script>


   function ShowCam() {
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach('#my_camera');
}
window.onload= ShowCam;

function snap() {
    Webcam.snap( function(data_uri) {
        // display results in page
        document.getElementById('results').innerHTML = 
        '<img id="image" src="'+data_uri+'"/>';
      } );      
}

function upload() {
    console.log("Uploading...")
    var image = document.getElementById('image').src;
    var form = document.getElementById('myForm');
    var formData = new FormData(form);
    formData.append("file", image);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "/Test");

    // check when state changes, 
    xmlhttp.onreadystatechange = function() {

    
    }

    xmlhttp.send(formData);
    console.log(formData);

    console.log(formData.get('file'));
    console.log(formData.get('userID'));
}

</script>

测试2.html

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<p> {{data}}

</body>
</html>

javascript python-3.x 烧瓶

在 Python 中将捕获的 WebCam 文件名显示到下一页（Flask）

Show Captured WebCam file name to Next Page in Python (Flask)

评论

在 Python 中将捕获的 WebCam 文件名显示到下一页 （Flask）

Show Captured WebCam file name to Next Page in Python (Flask)

评论

在 Python 中将捕获的 WebCam 文件名显示到下一页（Flask）