Tengo una web en php con un formulario que se manda a mysql.
Al mismo tiempo, activa un javascript que guarda un canvan en el servidor, llama a un php, guarda el archivo y sube el nombre del archivo al mysql.
La cuestión, es que solo funciona, si entro por primera vez, y de los 3 input que tengo, solo meto datos en el primero.
Os pongo los archivo, para ver si me podéis ayudar.
Muchas gracias.
Archivo php con formulario:
Código PHP:
<?php
require("conexion.php");
$status = "";
if (isset($_POST["nombre"])) {
$nombre = $_POST["nombre"];
$aceite = $_POST["aceite"];
$fecha_actual = date("Y-m-d");
$filtro = $_POST["filtro"];
$sql2="select `id` from `imagen` order by id DESC LIMIT 1";
$imagen=mysql_query($sql2, $conexion )or die(mysql_error());
$id_imagen=mysql_result($imagen, 0)+1;
$sql = "INSERT INTO `aceite` (`id_cliente`, `aceite`, `fecha`, `id_imagen`, `filtro`) ";
$sql.= "VALUES ('".$nombre."', '".$aceite."', '".$fecha_actual."', '".$id_imagen."', '".$filtro."')";
$id_imagen=mysql_result($imagen, 0);
mysql_query($sql, $conexion)or die(mysql_error());
$status = "ok";
echo $sql2."</br>";
echo $sql;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MobileOptimized" content="width" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<style>
#container { position: relative; }
#imageView { border: 1px solid #000; }
</style>
<h3>Introducir Aceite y Filtros</h3>
<?php if ($status == "ok") { ?>
<p class="confirm">Registro guardado correctamente</p>
<?php } ?>
<form method="post" id="frEmpresa" action="">
<label for="nombre">Cliente</label>
<input type="number" id="nombre" name="nombre" />
<br />
<label for="aceite">Aceite</label>
<input type="number" id="aceite" name="aceite" />
<br />
<label for="filtro">Filtros</label>
<input type="number" id="filtro" name="filtro" />
</br>
<canvas id="canvas" width="300" height="200"></canvas>
<div class="gui">
<input type="color" id="color" value="#000000">
<button id="bt-clear">CLEAR</button>
<button id="bt-save">SAVE</button>
</div>
<script src= "script/guardando-pngs.js"></script>
</form>
</body>
</html> Como veis, es un formulario sin más, lo unico que llama a un javascrip.
Código:
var tiemposcambian = tiemposcambian || {};
tiemposcambian.GuardandoPNGs = (function() {
var mousePressed = false;
var lastX, lastY;
var ctx;
function init() {
// init canvas
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
resetCanvas();
// button events
document.getElementById('bt-save').onmouseup = sendToServer;
document.getElementById('bt-clear').onmouseup = resetCanvas;
// canvas events
canvas.onmousedown = function(e) {
draw(e.layerX, e.layerY);
mousePressed = true;
};
canvas.onmousemove = function(e) {
if (mousePressed) {
draw(e.layerX, e.layerY);
}
};
canvas.onmouseup = function(e) {
mousePressed = false;
};
canvas.onmouseleave = function(e) {
mousePressed = false;
};
}
function draw(x, y) {
if (mousePressed) {
ctx.beginPath();
ctx.strokeStyle = document.getElementById('color').value;
ctx.lineWidth = 1;
ctx.lineJoin = 'round';
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function sendToServer() {
var data = canvas.toDataURL('image/png');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
// request complete
if (xhr.readyState == 4) {
}
}
xhr.open('POST','snapshot.php',true);
xhr.setRequestHeader('Content-Type', 'application/upload');
xhr.send(data);
}
function resetCanvas() {
// just repaint canvas white
ctx.fillStyle = '#EEEEEE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return {
'init': init
};
});
window.onload = function() {
new tiemposcambian.GuardandoPNGs().init();
};
Este llama a un php y hay termina todo.
Código:
Espero que me ayudeis, estoy desesperado. <?php
// read input stream
$data = file_get_contents("php://input");
// filtering and decoding code adapted from
// http://stackoverflow.com/questions/11843115/uploading-canvas-context-as-image-using-ajax-and-php?lq=1
// Filter out the headers (data:,) part.
$filteredData=substr($data, strpos($data, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$decodedData=base64_decode($filteredData);
// store in server
$fic_name = 'snapshot'.date("His").'.png';
$fp = fopen('snapshots/'.$fic_name, 'wb');
$ok = fwrite( $fp, $decodedData);
fclose( $fp );
require("conexion.php");
$sql = "INSERT INTO `imagen` (`nombre`) ";
$sql.= "VALUES ('".$fic_name."')";
mysql_query($sql, $conexion)or die(mysql_error());
?>
