在 javascript POST 中插入变量答案

【问题标题】：Insert a variable in javascript POST在 javascript POST 中插入变量
【发布时间】：2015-03-22 20:22:50
【问题描述】：

我有一个脚本可以从网络摄像头上传照片。图像可以正确发送，但我需要发送文件 savecam.php 也是一个给定的，它将是用户 ID。

<?php echo Auth::user()->id ?>

虽然，这部分代码是这样的：

    // Upload image to sever 
    document.getElementById("upload").addEventListener("click", function(){
        var dataUrl = canvas.toDataURL();
        $.ajax({
          type: "POST",
          url: "camsave.php",
          data: { 
             photo: dataUrl
          }
        }).done(function(msg) {
            console.log('saved');
        });
    });
}, false);

我应该添加，例如，

        // Upload image to sever 
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                 userID:  // <-- HERE ??
              }
            }).done(function(msg) {
                console.log('saved');
            });
        });
    }, false);
</script>

********* 编辑 **********

<div class="content">
    <video id="video" autoplay></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <button id="snap">Capture</button>
    <button type="reset" id="new">New</button>
    <button id="upload">Upload</button>
    <div id="userId" display="hidden" value="<?php echo Auth::user()->id ?>"></div>
</div>

<script>
            // Put event listeners into place
            window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                image_format= "jpg",
                jpeg_quality= 95,
                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };

            // Put video listeners into place
            if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function(stream){
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
                navigator.mozGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            // Trigger photo take
            document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(video, 0, 0, 640, 480);
                // Littel effects
                $('#video').fadeOut('slow');
                $('#canvas').fadeIn('slow');
                $('#snap').hide();
                $('#new').show();
                $('#upload').show();
            });

            // Capture New Photo
            document.getElementById("new").addEventListener("click", function() {
                $('#video').fadeIn('slow');
                $('#canvas').fadeOut('slow');
                $('#snap').show();
                $('#new').hide();
                $('#upload').hide();
            });

        // Upload image to sever 
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpg", 0.95);
            var userId = document.getElementById('userId').getAttribute('value'); //get the value of the the
            $("#uploading").show();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                  userId: userId
              }
            }).done(function(msg) {
                console.log('saved');
                $("#uploading").hide();
                $("#uploaded").show();
            });
        });
    }, false);
</script>

这个我也试过了，但是好像改了javascript的部分就够了，你弄坏了东西，其实已经不再给我显示接受网络摄像头的信息了。

【问题讨论】：

是的，你在这里说的很好。
我试过了，你能告诉我正确的语法吗？
您拥有的是正确的语法。不确定您存储用户标识的位置。在您的 php 中，您可以使用 $_POST['userID'] 从下面的随机答案中提取它。你所拥有的应该发挥作用。如果正确包装在 php 文件中。
@Geohut 那不是真的。您不能使用 Javascript 提取 POST 数据。 PHP 是服务器端脚本。 Javascript是客户端。 stackoverflow.com/questions/1409013/…
你可以...如果它被包装在一个 php 视图中。然后你把它放在一个脚本标签里面。在 html 内。那是生成给客户端的。他不是用 javascript 发布数据，而是用 JavaScript 发布数据，这是有区别的@BlackHatSamurai

标签： javascript php upload

【解决方案1】：

试试这个

var dataUrl = canvas.toDataURL();
post_data = {

      photo: dataUrl,
      userID:  HERE
};
 $.ajax({
     type: "POST",
     url: "camsave.php",
     data: post_data
    }).done(function(msg) {
        console.log('saved');
    });

【讨论】：

我试过了，但是警告没有启用访问网络摄像头，可能是语法错误。

【解决方案2】：

如果你这样做，它应该可以工作，但它要求你在提交表单之前知道用户 ID：

<div id="userId" display="hidden" value="<?php echo "your user id" ?>"></div>

因此，您将隐藏页面上的用户 ID，然后在发送请求时将其拉出。

那么你可以这样做：

 document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpg", 0.95);
            var userId = document.getElementById('userId').getAttribute('value');                           

            $("#uploading").show();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                  userId: userId
              }
            }).done(function(msg) {
                console.log('saved');
                $("#uploading").hide();
                $("#uploaded").show();
            });
        //you have an extra "})" here, so remove it
        }, false);

这是一个 JSFIDDLE，尽可能多地显示它的工作原理：https://jsfiddle.net/rq0qnc2y/5/

【讨论】：

【解决方案3】：

如果您运行下面的代码，您可以清楚地看到您可以将该值注入到 ajax 调用中。您可以使用http://phpfiddle.org/ 测试代码

<?php

        class User
        {
            public $id = 1234;

            public function __get($name){
                return this;
            }
        }

        class Auth
        {
            public static function user(){
                return new User();
            }
        }


        echo Auth::user()->id;




        ?>
        <html>
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            </head> 
            <body>
                <button id ="upload" width="100" height="100">click me</button>

                <script>
                document.getElementById("upload").addEventListener("click", function(){
                //var dataUrl = canvas.toDataURL();
                var dataUrl = "weeeh";
                $.ajax({
                  type: "POST",
                  url: "camsave.php",
                  data: { 
                      photo: dataUrl,
                     userId: <?php echo Auth::user()->id; ?>
                  }
                }).done(function(msg) {
                    console.log('saved');
                });
                });

                </script>
            </body>
        </html>

【讨论】：