teTe cuento algo
Respuesta extendida: ¿Como enviar archivos con por AJAX en formato json?
Como te decía en los comentarios el uso de un FormaData para enviar archivos al servidor funciona muy bien pero en caso de que necesites enviarlos en formato json hay una alternativa
Y es la siguiente:
// Obtenemos una referencia al input tipo file
const myFileElement = document.querySelector('#myFile');
// Obtenemos una referencia al botón de enviar
const sendBtn = document.querySelector('#send');
// Aqui guardaremos el archivo
let myFile = null;
let base64 = null;
// Obtenemos el file en cuanto te agregue uno nuevo al input
myFileElement.addEventListener('change', event => {
myFile = event.target.files[0]
});
sendBtn.addEventListener('click', event => {
// Prevenimos cualquier acción por defecto del botón
event.preventDefault();
// Creamos un FileReader para obtener el Base64 del archivo
const fileReader = new FileReader();
fileReader.addEventListener('load', () => {
base64 = fileReader.result.replace(/^data:(.+)\/(.+);base64,/i, '');
});
fileReader.readAsDataURL(myFile);
// Enviamos la solicitud AJAX de tipo POST
fetch('php.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
archivo: {
name: myFile.name,
type: myFile.type,
content: base64
}
})
})
.then(res => {
// Imprimimos la respuesta
console.log(res.json())
});
});
Y en ese caso del lado de PHP haremos lo siguiente:
<?php
// Se establece el tipo de contenido de la respuesta
header('Content-Type: application/json');
// Obtenemos los valores enviados a través de AJAX
$json_post = json_decode(file_get_contents('php://input'), true) ?? null;
// En este caso el archivo no estará en $_FILES sino en en la URL php://input
if (!is_null($json_post) && isset($json_post['archivo'])) {
http_response_code(200);
echo json_encode($json_post['archivo']);
}
else {
http_response_code(400);
echo json_encode([
'message' => 'Error, no se encontro ningun archivo'
]);
}
La Clase de Javascript usada para leer obtener el base64 del archivo es FileReader. Básicamente nos permite leer un Blob
o File
como data-uri, que es un formato de URL que trae el binario del archivo y su tipo incrustado en la URL y parseado a base64.
Nota extra: ¿Cómo hacer para almacenar el archivo en este caso?
Bien en ese caso solo haremos lo siguiente:
<?php
// Obtenemos los valores enviados a través de AJAX
$json_post = json_decode(file_get_contents('php://input'), true) ?? null;
// En este caso el archivo no estará en $_FILES sino en en la URL php://input
if (!is_null($json_post) && isset($json_post['archivo'])) {
// Creamos el archivo y obtenemos su resource
$file = fopen($json_post['archivo']['name'], 'w+');
// Parseamos a binario el base64
$bin = base64_decode($json_post['archivo']['content']);
// Escribimos el archivo
fwrite($file, $bin);
// Cerramos el archivo
fclose($file);
}