Tengo un formulario donde hay un input para subir imágenes, una vez acepto mediante js y php creo el insert para guardar los datos en el servidor para posteriormente mostrarlos en otra página. He comprobado que guarda la imagen en el servidor pero al descargarla directamente del servidor tiene un formato que mi página no puede interpretar ya que muestra un icono de error de imagen.
================================================================ EDIT: Con los nuevos cambios me salta este error tanto si elijo foto como si no:
Request failed: parsererror
HTML:
<form name="frmAltaNoticia" id="frmAltaNoticia" method="POST" enctype="multipart/form-data">
<div class="col-xs-3 col-sm-3 col-md-3">
<label>IdNoticia: </label>
<input type="text" placeholder="A0000"class="form-control" id="txtIdNoticia">
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<label>Fecha: </label>
<input type="date" placeholder="Fecha" class="form-control" name="txtFecha">
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<label>Título: </label>
<input type="text" placeholder="Título"class="form-control" name="txtTitulo">
</div>
<br>
<br>
<br>
<div class="col-xs-3 col-sm-3 col-md-3">
<label>Autor: </label>
<input type="text" placeholder="Autor"class="form-control" name="txtAutor">
</div>
<div class="col-xs-9 col-sm-9 col-md-9">
<label>Descripción:</label>
<textarea name="txtDescripcion" placeholder="Descripción" class="form-control" name="txtDescripcion"></textarea>
</div>
<br>
<div class="col-xs-5 col-sm-5 col-md-5">
<label>Imagen: </label>
<input type="file" class="form-control" name="txtImagen">
</div>
<br>
<br>
<br>
<br>
<div class="col-md-3">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">Aceptas los términos</label>
<div class="invalid-feedback">Debes aceptar los términos y condiciones</div>
</div>
<br>
<br>
<br>
<br>
<div class="col-xs-3 col-sm-3 col-md-3">
<input type="button" class="btn btn-dark btn-lg" onclick="ValidarNoticia()" value="Aceptar"></input>
</div>
</form>
PHP:
<?php
// Configuración BASE DE DATOS MYSQL
$servidor = "localhost";
$basedatos = "BDNoticias";
$usuario = "root";
$password = "";
# Obtenemos los datos normales con el estilo que usabas
$oNoticia = json_encode($_POST);
// Creamos la conexión al servidor.
$conexion = mysqli_connect($servidor, $usuario, $password,$basedatos);
if (!$conexion) {
$respuesta["error"]=1;
#Considera cambiarlo por un mensaje personalizado en producción
$respuesta["mensaje"]=mysqli_error($conexion);
} else {
mysqli_set_charset($conexion,"utf8");
# Pero como dijimos, la imagen está en otra super global
$mFile = file_get_contents($_FILES['txtImagen']["tmp_name"]);
$mBlob=base64_encode($mFile);
$sql = "INSERT INTO noticias (idnoticia, titulo, descripcion, autor, fecha, imagen) VALUES ('$oNoticia->txtIdNoticia','$oNoticia->txtTitulo','$oNoticia->txtDescripcion','$oNoticia->txtAutor','$oNoticia->txtFecha','$mBlob');";
$resultado = mysqli_query($conexion,$sql);
if ($resultado){
$respuesta["error"] = 0;
$respuesta["mensaje"] = "Alta realizada";
} else {
$respuesta["error"] = 1;
$respuesta["mensaje"] = "Error en el proceso de alta: ".mysqli_error($conexion);
}
}
echo json_encode($respuesta);
//var_dump($_POST);
var_dump($oNoticia);
mysqli_close($conexion);
?>
JS:
function crearNoticia()
{
/* Esta línea basta para recoger todo lo que haya en el
formulario*/
var mData = new FormData(document.getElementById("frmAltaNoticia"));
var mAjax = $.ajax({
url: "../ApartadosPHP/altanoticias.php",
method: "POST",
data: mData,
processData: false,
contentType: false,
dataType: "json"
});
mAjax.done(function( oDatos ) {
respuestaAltaNoticia(oDatos);
});
mAjax.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
};
function respuestaAltaNoticia(oDatos, sStatus, oXHR) {
if (oDatos.error)
{
alert(oDatos.mensaje);
}
else
{
alert(oDatos.mensaje);
frmAltaNoticia.reset();
}
}
var_dump:
index.js:640 string(117) "{"txtIdNoticia":"G7894","txtFecha":"2021-08-05","txtTitulo":"noticia","txtAutor":"pepe","txtDescripcion":"noticiass"}"
<br />
<b>Notice</b>: Trying to get property 'txtIdNoticia' of non-object in <b>C:\xampp\htdocs\proyectoFinal\ProyectoSenderismo\ApartadosPHP\altanoticias.php</b> on line <b>24</b><br />
<br />
<b>Notice</b>: Trying to get property 'txtTitulo' of non-object in <b>C:\xampp\htdocs\proyectoFinal\ProyectoSenderismo\ApartadosPHP\altanoticias.php</b> on line <b>24</b><br />
<br />
<b>Notice</b>: Trying to get property 'txtDescripcion' of non-object in <b>C:\xampp\htdocs\proyectoFinal\ProyectoSenderismo\ApartadosPHP\altanoticias.php</b> on line <b>24</b><br />
<br />
<b>Notice</b>: Trying to get property 'txtAutor' of non-object in <b>C:\xampp\htdocs\proyectoFinal\ProyectoSenderismo\ApartadosPHP\altanoticias.php</b> on line <b>24</b><br />
<br />
<b>Notice</b>: Trying to get property 'txtFecha' of non-object in <b>C:\xampp\htdocs\proyectoFinal\ProyectoSenderismo\ApartadosPHP\altanoticias.php</b> on line <b>24</b><br />
{"error":0,"mensaje":"Alta realizada"}
enctype="multipart/form-data"
para poder enviar archivos. Luego, en PHP debes usarmove_uploaded_file()
para mover la imagen de carpeta temporal a su destino final. Por último, al insertar en MySQL también debes incluir la imagen, de preferencia, solo el nombre. Te recomiendo leer esta pregunta tal vez te sea útil para comenzar a corregir esos errores.contentType: false, processData: false, type: 'POST',