Home / Questions / 470420
Accepted
John Doe
Asked: 2022-07-23 03:24:16 +0800 CST 2022-07-23 03:24:16 +0800 CST

Show mysql server image via xml table with javascript with encode error

  • 772

I am trying to display an image taken from the mysql server to display it on my website by generating an xml and creating a table with javascript.

I have a getNoticia.php where I communicate with the server:

 <?php

// Configuración BASE DE DATOS MYSQL
$servidor  = "localhost";
$basedatos = "BDNoticias";
$usuario   = "root";
$password  = "";

// Creamos la conexión al servidor.
$conexion = mysqli_connect($servidor, $usuario, $password,$basedatos) or die(mysqli_error($conexion));
mysqli_set_charset($conexion,"utf8");

// Consulta SQL para obtener los datos de los centros.
$sql = "SELECT * FROM noticias";
$resultados = mysqli_query($conexion,$sql);

$XML ='<?xml version="1.0" encoding="UTF-8"?>';
$XML .='<datos>';

while ($fila = mysqli_fetch_array($resultados)) {
    $XML .='<documento>';
        $XML .='<idnotici>'.$fila["idnoticia"].'</idnotici>';
        $XML .='<titul>'.$fila["titulo"].'</titul>';
        $XML .='<descripcio>'.$fila["descripcion"].'</descripcio>';
        $XML .='<auto>'.$fila["autor"].'</auto>';
        $XML .='<fech>'.$fila["fecha"].'</fech>';
        $XML .='<img>'.base64_encode($fila["imagen"]).'</img>';
    $XML .='</documento>';
}

$XML .='</datos>';

// Cabecera de respuesta indicando que el contenido de la respuesta es XML
header("Content-Type: text/xml");
// Para que el navegador no haga cache de los datos devueltos por la página PHP.
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

echo $XML;

mysqli_close($conexion);
?>

If I remove the base64_encode()from tag I get lots of "?" by console they give me the error and it doesn't show me anything. If I don't remove it, it shows me in the table a very long line of characters that I imagine is the image.

In theory, this line mysqli_set_charset($conexion,"utf8");is fine, so I understand that the problem comes with the encoding of the image.

Without base64_encode():

without

With base64_encode():

with

To display the data I use this function in js:

            function construirListado(oXML) 
           {
            // Crear tabla
            var oTabla = document.createElement("table");
            oTabla.border = "3";
            var oTHead = oTabla.createTHead();
            var oFila = oTHead.insertRow(-1);
            
            var oTH = document.createElement("TH");
            oTH.textContent = "IDNoticia";
            oFila.appendChild(oTH);
            
            oTH = document.createElement("TH");
            oTH.textContent = "Título";
            oFila.appendChild(oTH);

            oTH = document.createElement("TH");
            oTH.textContent = "Autor";
            oFila.appendChild(oTH);

            oTH = document.createElement("TH");
            oTH.textContent = "Fecha";
            oFila.appendChild(oTH);
            
            /*
            oFila = oTHead.insertRow(-1);
            oTH = document.createElement("TH");
            oTH.textContent = "Descripción";
            oFila.appendChild(oTH);*/
                        
            var oTBody = oTabla.createTBody();      
            var oPersonas = oXML.querySelectorAll("documento");
            for (var i = 0; i < oPersonas.length; i++) {
                oFila = oTBody.insertRow(-1);

                var oCelda = oFila.insertCell(-1);
                oCelda.textContent = oPersonas[i].querySelector("idnotici").textContent;

                oCelda = oFila.insertCell(-1);
                oCelda.textContent = (oPersonas[i].querySelector("titul").textContent);                            
            
                oCelda = oFila.insertCell(-1);
                oCelda.textContent = (oPersonas[i].querySelector("auto").textContent);

                oCelda = oFila.insertCell(-1);
                oCelda.textContent = (oPersonas[i].querySelector("fech").textContent);
                    
                oFila = oTBody.insertRow(-1);
                oFila = oTBody.insertRow(-1);
                oCelda = oFila.insertCell(-1);
                // Combina para ocupar toda la fila
                oCelda.colspan = 4;             
                oCelda.textContent = (oPersonas[i].querySelector("descripcio").textContent);
                
            
                oCelda = oFila.insertCell(-1);      
                oCelda.textContent = (oPersonas[i].querySelector("img").textContent);
                    
            }
            document.querySelector("#listado").innerHTML = "";
            document.querySelector("#listado").appendChild(oTabla);
        
}
javascript

1 Answers

  1. Best Answer

    PHP code

    Your code doesn't generate correct XML since you don't use htmlspecialchars()when creating XML manually, so any characters that might interfere with the XML format will break it, might corrupt it, or might inject unwanted code into it.

    Still I suggest you use DOMto create XML documents in PHP.

    Here is an example of how to adapt your code to DOM:

    <?php
/* Indicamos el tipo de datos que enviaremos */
header("Content-type: text/xml");

/* Creamos el documento XML */
$dom = new DOMDocument('1.0', 'utf-8');

/* Creamos el nodo raíz y lo agregamos al documento XML*/
$datos = $dom->createElement('datos');
$dom->appendChild($datos);

/* Aquí realizas la consulta SQL */

while ($fila = mysqli_fetch_array($resultados)) {
    /* Creamos el elemento "documento" donde almacenaremos los valores de cada iteración */
    $documento = $dom->createElement('documento');
    /* Creamos y agregamos los elementos al nodo "documento" */
    $documento->appendChild($dom->createElement('idnotici', $fila['idnoticia']));
    $documento->appendChild($dom->createElement('titul', $fila['titulo']));
    $documento->appendChild($dom->createElement('descripcio', $fila['descripcion']));
    $documento->appendChild($dom->createElement('auto', $fila['autor']));
    $documento->appendChild($dom->createElement('fech', $fila['fecha']));
    /* Codificamos en BASE64 la imagen ya que los datos binarios en CDATA no son compatibles con utf-8 */
    $documento->appendChild($dom->createElement('img', base64_encode($fila['imagen'])));
    /* En caso de serlo sería así */
    /*$documento
        ->appendChild($dom->createElement('img'))
        ->appendChild($dom->createCDATASection($fila['imagen']));*/
    /* Agregamos el elemento "documento" al elemento raíz "datos" */
    $datos->appendChild($documento);
}

/* Enviamos el XML al navegador */
echo $dom->saveXML();

    JavaScript code

    Once the XML has been correctly generated, we are ready to read it on the web page using any technology available for it, such as XMLHttpRequestor fetch.

    Suppose we do it using fetch:

    fetch('tu_script.php')
    .then(respuesta => respuesta.text())
    .then(texto => (new window.DOMParser()).parseFromString(texto, "text/xml"))
    .then(xml => {
        console.log(xml);
        construirListado(xml);
    });

    Now your function will have as input the XML obtained from your PHP script, so it only remains to generate an image from the BASE64 data sent in the XML:

    oCelda = oFila.insertCell(-1);

/* Creamos la imagen */
var imagen = document.createElement('img');
imagen.src = "data:image/jpeg;base64," + (oPersonas[i].querySelector("img").textContent)

/* Agregamos el elemento "<img>" creado dentro de la celda */
oCelda.appendChild(imagen);

    Resources used to reproduce this issue:

    • 1