Listado completo de tutoriales

ES6 - API fetch (enviar un archivo adjunto)

Otra actividad común en una aplicación web es la de enviar archivos a un servidor para que sean almacenados.

Cuando necesitamos adjuntar uno o más archivos y enviarlos al servidor el API fetch requiere también que se haga por el método POST.

La siguiente página permite seleccionar un archivo y mediante 'fetch' enviar el archivo adjunto:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>
    <p>Foto:<input type="file" id="foto" required></p>
    <p><button type="button" id="boton1">Subir foto</button></p>
    <p><img id="imagen"></p>

    <script>
        document.getElementById("boton1").addEventListener("click", () => agregar());


        function agregar() {
            let fd = new FormData();
            fd.append("foto", document.getElementById("foto").files[0]);
            fetch('subirfoto.php', {
                method: 'POST',
                body: fd
            })
                .then(response => response.json())
                .then(datos => {
                    if (datos.resultado == "Ok")
                        document.getElementById("imagen").setAttribute("src", document.getElementById("foto").files[0].name);
                })
        }
    </script>

</body>

</html>

Disponemos la etiqueta 'input' con el valor 'file' en la propiedad 'type':

  <p>Foto:<input type="file" id="foto" required></p>
  <p><button type="button" id="boton1" >Subir foto</button></p>
  <p><img id="imagen"></p>

Cuando se presiona el botón subir se llama a la función 'agregar' donde creamos un objeto de tipo 'FormData': 

            let fd = new FormData();

Llamamos al método 'append' del FormData y asociamos un nombre en este caso "foto" y los datos del control HTML que tienen la referencia del archivo adjunto:

            fd.append("foto", document.getElementById("foto").files[0]);

Llamamos al método 'fetch' y configuramos el método de envío 'POST' y en la propiedad 'body' pasamos el objeto FormData previamente creado:

            fetch('subirfoto.php', {
                method: 'POST',
                body: fd
            })
                .then(response => response.json())

Una vez subido el archivo si se nos retorna "Ok" procedemos a mostrar la imagen, recuperando la misma del servidor donde la subimos:

                .then(datos => {
                    if (datos.resultado == "Ok")
                        document.getElementById("imagen").setAttribute("src", document.getElementById("foto").files[0].name);
                })

La aplicación PHP que almacena la foto en el servidor es:

<?php
move_uploaded_file($_FILES['foto']['tmp_name'], $_FILES['foto']['name']);
echo '{"resultado":"Ok"}';
?>

Retornar