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.

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í. De ahí 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í:

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.

Estoy interesado en trabajar contigo de manera remota para llevar tu idea a la realidad, formar parte de tu equipo de desarrolladores, ayudarte con tu tarea, dar asesorías y todo lo relacionado con tecnología y programación. Contáctame para más información
No te vayas sin seguirme en Twitter, Facebook y GitHub
Si tienes dudas déjalas en un comentario, pero asegúrate de seguirme antes como agradecimiento (no te cuesta nada y me ayudas mucho)


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: