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

Question

I have a HTML page allowing a user to take a photo and that photo then shows up on the screen as a canvas image. I want to now send this image to the server to be uploaded, along with other data, using POST method.

JavaScript for displaying image:

<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 Form:

<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 to add data to form (For the other data, how would I add image like this?):

<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>

How would I go about doing this?

Answer 1

You have to add hidden input field of type "file" to your form and the put video element as file in the new input field!