Introducción
Siguiendo con los tutoriales de enviar o cargar archivos a un servidor usando AJAX veamos hoy cómo podemos subir múltiples archivos a PHP usando FormData y el framework AngularJS.
Para esto usaremos el servicio de $http combinado con FormData.
Vista, controlador y petición con AngularJS y $http
Será un input en donde se podrán seleccionar varios archivos (para que esto suceda ponemos la propiedad multiple).
También se podrá enviar una cadena para que veamos que no únicamente podemos enviar archivos. De esta forma podremos enviar un formulario completo, sin importar si tiene archivos o cadenas y números.
Entonces definimos el controlador de AngularJS, escuchamos el click del botón con ng-click y llamamos al método enviarFormulario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Subida de múltiples archivos con AngularJS y FormData</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="principal">
<input id="archivos" multiple type="file">
<br><br>
<input ng-model="nombre" type="text" placeholder="Tu nombre">
<button ng-click="enviarFormulario()">Enviar</button>
</div>
<script>
/**
Envío de múltiples archivos y datos
a PHP desde AngularJS usando FormData y $http
@author parzibyte
parzibyte.me/blog
*/
angular.module("app", [])
.controller("principal", ["$scope", "$http", function ($scope, $http) {
const $archivos = document.querySelector("#archivos");
$scope.enviarFormulario = function () {
let archivos = $archivos.files;
if (archivos.length > 0 && $scope.nombre) {
let formdata = new FormData();
// Agregar cada archivo al formdata
angular.forEach(archivos, function (archivo) {
formdata.append(archivo.name, archivo);
});
// Finalmente agregamos el nombre
formdata.append("nombre", $scope.nombre);
// Hora de enviarlo
// Primero la configuración
let configuracion = {
headers: {
"Content-Type": undefined,
},
transformRequest: angular.identity,
};
// Ahora sí
$http
.post("./guardar_archivos.php", formdata, configuracion)
.then(function (respuesta) {
console.log("Después de enviar los archivos, el servidor dice:", respuesta.data);
})
.catch(function (detallesDelError) {
console.warn("Error al enviar archivos:", detallesDelError);
})
} else {
alert("Rellena el formulario y selecciona algunos archivos");
}
};
}]);
</script>
</body>
</html>El script es muy sencillo. Validamos que el usuario haya seleccionado archivos y que haya rellenado el campo del nombre.
Por cierto, el input de tipo file no puede ser ligado con ng-model así de fácil, por lo que debemos recurrir a otros métodos.
Para ello usamos querySelector, de esa manera obtenemos una referencia al elemento en sí.
Lo demás es agregar cada archivo a nuestra variable de tipo FormData. Usamos $http.post para hacer una petición POST con AngularJS y actuamos dependiendo de la respuesta de la promesa.
Por cierto, debemos incluir la configuración así como se indica para que el formulario y los archivos sean mandados con éxito.
Lado del servidor
Todos los archivos están en $_FILES y todo aquello que no es archivo y agregamos a nuestro objeto de tipo FormData está en $_POST.
Podemos iterar sobre $_FILES e ir guardando el archivo, como vimos en este tutorial.
Para obtener el nombre, accedemos a $_POST["nombre"], pues esa fue la clave con la que agregamos el dato a nuestro formData en el método append.
El código queda así:
<?php
/**
Envío de múltiples archivos y datos
a PHP desde AngularJS usando FormData y $http
@author parzibyte
parzibyte.me/blog
*/
// Los archivos en $_FILES y lo demás en $_POST
$nombre = $_POST["nombre"];
// Aquí podemos hacer lo que sea con $nombre
foreach ($_FILES as $archivo) {
move_uploaded_file($archivo["tmp_name"], $archivo["name"]);
}
# La respuesta que recibe $http.post en el then de la promesa
echo true;Lo que hace ese código es recorrer los archivos e ir guardándolos en el mismo directorio. Recordemos que no aplicamos nada de seguridad, pero se me ocurre que podríamos renombrar los archivos antes de guardarlos.
Conclusión y apuntes
Así podemos enviar archivos múltiples, o datos simples. En todo caso, todo se realiza a través de una petición AJAX que envuelve el servicio $http de AngularJS.
Vimos igualmente que podemos agregar datos, cadenas, y todas esas cosas. Incluso en un formdata podríamos agregar un JSON, pues un JSON serializado al final es una simple cadena.
Esto abre muchas posibilidades, pues agregamos más dinamismo, mejor experiencia de usuario y además, todo eso se hace con muy poco código.
Ah, no olvides haber descargado angularjs.min.js, y recuerda que el archivo de PHP se llama guardar_archivos.php.
cómo puedo poner una lista con los archivos que subí, en una columna de una tabla ???
El conocimiento es oro, lamentablemente aqui lo encuentras gratis, es una pena