Ajax Binario

11-4-2020

Vamos a hacer un ejemplo de Ajax con archivos del tipo binario, donde vamos a cargar una imagen en un formulario.

Vamos a usar createObjectURL().

    <form>
        <input type="file">
        <button>Enviar</button>
    </form>
    <hr>
    <img src="" alt="">

    <script src="js/main.js"></script>

 

En el archivo main.js, vamos a tomar el archivo que subamos y mostrarlo en pantalla.

function cargarImagen(imagen) {
    //la imagen empieza vacía
    let img = document.querySelector('img')
    img.src = ''
    //hacemos una conexión al servidor vía ajax
    let xhr = new XMLHttpRequest
    //esperamos una respuesta del tipo blob, es decir una imagen
    xhr.responseType = 'blob'
    //abrimos el archivo mediante el método get
    //imagen es el parámetro que nos viene de más abajo, cuando llamamos a la función
    //le agregamos un número -por ejemplo la fecha y hora- 
    //para evitar que el server la pueda cachear
    xhr.open('get', imagen + '?' + Date.now())
    //escuchamos cuando carga la imagen
    xhr.addEventListener('load', () => {
        //si la respuesta es 200
        if(xhr.status == 200) {
            //agarramos la respuesta del servidor
            //que va a ser un blob
            let imagenBlob = xhr.response
            //usamos createObjectURL() para generar un link temporal y relativo a la pantalla que tenemos abierta que ubicada  la imagen como tal para que la podamos usar
            let url = URL.createObjectURL(imagenBlob)
            // console.log(url) nos va a mostrar algo así:
            // blob:http://127.0.0.1:5500/515eb040-be53-431b-b75d-65f18bab999d
            // metemos la url temporal para mostrarla en pantalla, en la property src de la variable img
            img.src = url
        }
    })

    xhr.addEventListener('progress', e => {
        console.log(e)
    })

    xhr.send()
}

//agregamos un escuchador al formulario una vez que se hace el submit
let form = document.querySelector('form')
form.addEventListener('submit', e => {
    //evitamos que la acción normal de enviar el form al servidor ocurra
    e.preventDefault()
    /* si hacemos console.log(form) vamos a ver que el nombre del archivo está en el primer item del form que es el input (el segundo es el botón submit). Dentro de form[0] está files, que devuelve un array, y en el elemento 0, que es el primer elemento tiene el nombre de la imagen xxx.jpg en la property name
Tomamos entonces el nombre y lo metemos en una variable */
    let archivo = form[0].files[0].name
    //y metemos ese nombre de archivo en cargarImagen(), función que definimos más arriba.
    cargarImagen(archivo)
})