Question

我有一个HTML页面，允许用户拍摄照片，然后该照片会在屏幕上显示为画布图像。我现在想要使用POST方法将此图像与其他数据一起发送到要上载的服务器。

用于显示图片的JavaScript：

<script>
                // Elements for taking the snapshot
                var video = document.getElementById('video');
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var dataURL;

                //Hide photo elements until user clicks button
                $("#snap").hide();
                $("#canvas").hide();
                $("#video").hide();

                //user clicks take photo button
                $("#showCam").click(function() {
                    $(this).hide();
                    $("#snap").show();
                    $("#video").show();
                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                        navigator.mediaDevices.getUserMedia({
                            video : true
                        }).then(function(stream) {
                            video.src = window.URL.createObjectURL(stream);
                            video.play();
                        });
                    }
                });

                // Trigger photo take
                $("#snap").click(function() {
                    context.drawImage(video, 0, 0, 640, 480);
                    $("#canvas").show();
                    $(this).hide();
                    $("#video").hide();

                    //convert canvas image to url format
                    dataURL = canvas.toDataURL();
                });




            </script>

HTML表单：

<div id=formContainer>
        <form id="myForm" action="insert.php" method="post" enctype="multipart/form-data">
            Description
            <input type="text" name="fdesc">
            <br>
            <input type="submit" value="Insert">
        </form>
    </div>

JQuery将数据添加到表单中（对于其他数据，我将如何添加这样的图像？）：

<script>
        $('#myForm').submit(function() {
            var input = $("<input>").attr("type", "hidden").attr("name", 'lat').val(latArray);
            $('#myForm').append($(input));

            var input = $("<input>").attr("type", "hidden").attr("name", 'lon').val(lonArray);
            $('#myForm').append($(input));

            //var input = $("<input>").attr("type", "file").attr("name", 'img').val(image);
            //$('#myForm').append($(input));

            return true;
        });

    </script>

我该怎么做呢？

Answer 1

你必须添加类型＆＃34;文件＆＃34;的隐藏输入字段。将您的表单和put视频元素作为新输入字段中的文件！

Answer 2

您可以使用https://api.jquery.com/jquery.post/代替

，而不是使用html表单进行POST

POST图像到PHP文件以及要上载的其他数据

2 个答案: