Skip to main content
Adición de nota
Origen Enlace
Josbert
  • 1k
  • 5
  • 16

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

te cuento algo

Te 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);
}
Origen Enlace
Josbert
  • 1k
  • 5
  • 16

te cuento algo

Para enviar archivos a través de AJAX con Fetch deberías enviar tus datos con un FormaData y el header Content-Type con el valor multipart/form-data

Como en el siguiente ejemplo:

<input type="file" id="myFile" name="myFile">
<button id="send">Enviar</button>
// 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;

// 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 boton
    event.preventDefault();

    // Creamos el FormData y le añadimos un campo
    const formData = new FormData();
    formData.append('myFile', myFile);

    // Enviamos la solicitud AJAX de tipo POST
    fetch('php.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data'
        },
        body: formData
    })
    .then(res => {
        // Imprimimos la respuesta
        console.log(res.json())
    });
});

Y del lado del servidor con PHP hacemos lo siguiente:

<?php
// Se establece el tipo de contenido de la respuesta
header('Content-Type: application/json');

// La variable global $_FILES contiene los archivos subidos
if (isset($_FILES) && count($_FILES) > 0 && isset($_FILES['myFile'])) {
    http_response_code(200);
    
    echo json_encode($_FILES['myFile']);
}
else {
    http_response_code(400);

    echo json_encode([
        'message' => 'Error, no se encontro ningun archivo'
    ]);
}

Ese sería un ejemplo algo completo de como sería el proceso, si quieres devolver el archivo completo, por ejemplo en formato data-uri el proceso es un poco distinto.