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

Question

У меня есть сценарий для загрузки фотосессии с веб-камеры. Изображение может правильно отправить его, но мне нужно отправить файл 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> 

********* EDIT **********

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

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

Answer 2

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

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

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