Вставьте переменную в JavaScript POST

Question

Вставьте переменную в JavaScript POST

0

У меня есть сценарий для загрузки фотосессии с веб-камеры. Изображение может правильно отправить его, но мне нужно отправить файл savecam.php также заданный, это будет идентификатор пользователя.

<?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, и вы что-то сломали, по сути, уже не показывает мне сообщение о принятии веб-камеры.

Okram92 22 март 2015, в 21:34

Источник

0

Да, где вы сказали, здесь хорошо.
Asheliahut 22 март 2015, в 20:29
0

Я пытался, вы можете сказать мне правильный синтаксис?
Okram92 22 март 2015, в 20:33
0

То, что у вас есть, это правильный синтаксис. Не уверен, где вы сохранили свой идентификатор пользователя. И в вашем php вы можете получить его, используя $ _POST ['userID'] из вашего случайного ответа ниже. То, что у вас есть, должно функционировать. Если правильно обернут в файл php.
Asheliahut 22 март 2015, в 20:39
0

@Geohut Geohut Это не правда. Вы не можете получить данные POST с Javascript. PHP это серверный скрипт. Javascript на стороне клиента. stackoverflow.com/questions/1409013/...
BlackHatSamurai 22 март 2015, в 20:44
0

Вы можете ... Если это обернуто в представлении php. И вы помещаете его в тег скрипта. В пределах HTML. Это генерируется для клиента. Он не тянет данные с помощью JavaScript, он публикует данные с помощью JavaScript, есть разница @BlackHatSamurai
Asheliahut 22 март 2015, в 20:49
0

@Geohut Geohut, посмотрите на ссылку, которую я предоставил.
BlackHatSamurai 22 март 2015, в 20:50
0

Я прочитал это, и это не то, что здесь происходит ...
Asheliahut 22 март 2015, в 20:50
0

@Okram92 Okram92 Я обновил свой ответ. В вашем методе Javascript произошла ошибка
BlackHatSamurai 22 март 2015, в 21:15
0

@BlackHatSamurai BlackHatSamurai Я разместил код ниже, чтобы показать вам, что на самом деле можно добиться того, что показывал ОП.
Asheliahut 22 март 2015, в 22:06

Показать ещё 7 комментариев

Теги:

php

javascript

upload

3 ответа

Ещё вопросы

Я пытался, вы можете сказать мне правильный синтаксис?
То, что у вас есть, это правильный синтаксис. Не уверен, где вы сохранили свой идентификатор пользователя. И в вашем php вы можете получить его, используя $ _POST ['userID'] из вашего случайного ответа ниже. То, что у вас есть, должно функционировать. Если правильно обернут в файл php.
@Geohut Geohut Это не правда. Вы не можете получить данные POST с Javascript. PHP это серверный скрипт. Javascript на стороне клиента. stackoverflow.com/questions/1409013/...
Вы можете ... Если это обернуто в представлении php. И вы помещаете его в тег скрипта. В пределах HTML. Это генерируется для клиента. Он не тянет данные с помощью JavaScript, он публикует данные с помощью JavaScript, есть разница @BlackHatSamurai
@Geohut Geohut, посмотрите на ссылку, которую я предоставил.
Я прочитал это, и это не то, что здесь происходит ...
@Okram92 Okram92 Я обновил свой ответ. В вашем методе Javascript произошла ошибка
@BlackHatSamurai BlackHatSamurai Я разместил код ниже, чтобы показать вам, что на самом деле можно добиться того, что показывал ОП.

Asheliahut · Answer 1 · 2015-03-22T19-36-00.000Z

Если вы запустите код ниже, вы можете ясно видеть, что вы можете ввести это значение в вызов 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>

BlackHatSamurai · Answer 2 · 2015-03-22T18-44-00.000Z

Если вы сделаете что-то подобное, оно должно работать, но вам нужно знать идентификатор пользователя перед отправкой формы:

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

Таким образом, вы должны скрыть идентификатор пользователя на странице, а затем потянуть его, когда вы отправите запрос.

Тогда вы можете сделать:

 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/

nanytech · Answer 3 · 2015-03-22T17-49-00.000Z

Попробуй это

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');
    });

Я пытался, но предупреждение не имеет доступа к веб-камере, возможно, неправильный синтаксис.