[SOLUCIONADO] mandar un dato post por javascript

[PeruClic]

por favor espero su ayuda, no tengo casi idea en javascript y quisiera que me ayuden o si esta en un mal lugar corrijanme, gracias

tengo un script que toma foto en html5 y esa foto lo guarda en una carpeta

modifique algunas cosas para que a la vez se cree un registro en mysql con el nombre el archivo y la fecha de almacenamiento, ahi no tuve problemas porque el archivo principal index.php llama en una parte el siguiente codigo

Código HTML:

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

y en camsave.php puede conectarme a la base de datos y almacenar datos sin problemas como dije, pero esos datos se generan en el mismo camsave.php

$fecha=date("YmdHis");
$fech=date("d/m/Y - H:i:s");

tengo un tercer dato qeu quisiera jalarlo desde index.php y que lo almacene en mi base de datos, pero como quien procesa la orden es camsave.php necesito mandar el dato en post a camsave.php no puedo hacerlo con php porque ya se ejecuta ahora la orden de alacenar y todo con javascript espero su ayuda debe ser sencillo gracias de nuevo

[Alexis88]

No me quedó muy clara tu explicación, ¿no estás recibiendo el dato con $_POST['imgBase64'] o qué es lo que sucede?

Saludos

[PeruClic]

si lo recibo bien, porque ya venia con el codigo que encontre, asi como index.php manda ese post de imagen asi quisiera mandar otro campo que yo agrege y eso es lo que no puedo llevar un nuevo dato post en javascript para que camsave.php lo reciba y guarde, con que lo mande sufi amigo gracias por responder

[PeruClic]

disculpa mi ignorancia en javascript estoy tratando de copiar el codigo y llevarlo algo asi

document.getElementById("dni").addEventListener("c lick", function(){
var dataUrl = trim($_POST["dni"]);
$.ajax({
type: "POST",
url: "camsave.php",
});

[Alexis88]

Si deseas enviar un dato más, solo añádelo al objeto literal que asignas al atributo data del método $.ajax.

Código Javascript:

data: {
    imgBase64: dataUrl,
    otroDato: $("#id_del_otro_campo").val()
}
 

Ojo, si el campo que añadiste no posee el atributo value, en lugar de .val() tendrás que utilizar otro método, como .html() o .text().

Saludos

[PeruClic]

gracias por responderme pero le agrego esa linea y deja de funcionar todo

[PeruClic]

Código:

document.getElementById("upload").addEventListener("click", function(){
				var dataUrl = canvas.toDataURL();
				$.ajax({
				  type: "POST",
				  url: "camsave.php",
				  data: { 
					 imgBase64: dataUrl
					otroDato: $("#dni").val()
				  }
				}).done(function(msg) {
				  console.log('saved');
				 // Do Any thing you want
				});

asi lo estoy dejando y se quemo

[Alexis88]

¿Te has fijado en la forma en como lo hice? Después del primer dato, va una coma y luego añado el siguiente. Corrige eso.

[PeruClic]

disculpa pero no allo el que es para javascript

Código:

<div class="content">
	<video id="video" autoplay></video>
	<canvas id="canvas" width="640" height="480"></canvas>
<br><button id="snap">Tomar Foto</button>	
<button id="upload">Subir</button>
</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 },
				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();
				// Allso show upload button
				//$('#upload').show();
			});
			// Upload image to sever 
			document.getElementById("upload").addEventListener("click", function(){
				var dataUrl = canvas.toDataURL();
				$.ajax({
				  type: "POST",
				  url: "camsave.php",
				  data: { 
					 imgBase64: dataUrl
					otroDato: $("#dni").val()
				  }
				}).done(function(msg) {
				  console.log('saved');
				 // Do Any thing you want
				});
			});
			
		}, false);

</script>

mira ese es todo el código simplemente hace eso y el camsave.php

Código PHP:

  <?php
$rawData = $_POST['imgBase64'];
$filteredData = explode(',', $rawData);
date_default_timezone_set('America/Lima');
$fecha=date("YmdHis");
$fech=date("d/m/Y - H:i:s"); 
 
$unencoded = base64_decode($filteredData[1]);
$randomName = rand(0, 99999);;
//Create the image
 
$fp = fopen($fecha.'.png', 'w');
fwrite($fp, $unencoded);
 
$link = mysql_connect('localhost', 'cesos_admin', 'windowsxp')
or die('No se pudo conectar: ' . mysql_error());
echo 'Connected successfully';
mysql_select_db('cesos_demo') or die('No se pudo seleccionar la base de datos');
$sql='select * from fotos';
$sql="insert into fotos VALUES ('$fecha','$dni','$fech')";
mysql_query($sql);
 
?>   

fijate el insert into es lo que agrege y el campo que necesito es dni cuando toma la foto solo lo subia a una carpeta ahora yo almaceno el nombre del archivo, la fecha y quisiera enlazarlo con dni que viene de un post anterior todavia

Código HTML:

<form action="index.php" method="post">
            	<input type="text" name="dni" /><br /><br />
                <input type="submit" value=" Continuar " />
            </form> 

con esto mando y en index.php puede recibirlo normal con

Código PHP:

  <? echo $_post[dni]; ?>   

mi problema es llevar este campo a camsave.php para que lo almacene con los otros registro solo eso espero se me entienda gracias

[Alexis88]

Como te acabo de decir, te faltó añadir una coma luego del primer dato en el objeto literal que asignas al atributo data del método $.ajax.

Código Javascript:

data: { 
    imgBase64: dataUrl,
    otroDato: $("#dni").val()
}
 

Y luego lo recibes en el archivo PHP de este modo:

Código PHP:

$_POST['otroDato'];
 

Saludos

[PeruClic]

gracias amigo corre pero sigue sin guardar, haber estoy llamando mal a el campo dni quizas, probe ponerle cualquier informacion dentro osea

Código Javascript:

imgBase64: dataUrl,
otroDato: $("42465921").val()
 

y en el otro archivo lo llamo

Código PHP:

$dni = $_POST['otroDato'];
$sql="insert into fotos VALUES ('$fecha','$dni','$fech')";
 

claro estan separados te pongo las lineas que tienen relacion noma

que crees que pueda ser gracias por tu ayuda

[PeruClic]

probe agregar un

Código HTML:

<input type="text" name="dni">
 

y mas abajo

Código Javascript:

otroDato: $("#dni").val()
 

pero tpc lo jala o reocnoce el dato el otro archivo

[PeruClic]

tema resuelto, disculpa olvide llamarlo como id no con name

[Alexis88]

Para tomar al campo, puedes hacerlo ya sea por el nombre de su etiqueta, su clase o su id, aunque también existen otras formas, pero lo aconsejable es hacerlo por su id pues es un dato único.

El id iría entre las comillas que están entre los paréntesis, pero deberás anteponerle un #. Como en tu caso solo tiene el atributo name, deberás de hacerlo así:

Código Javascript:

data: { 
    imgBase64: dataUrl,
    otroDato: $("[name=dni]").val()
}
 

Saludos