Subida de imágenes múltiple con AngularJS

No es la primera vez que hablamos por aquí sobre subida múltiple de ficheros. Es uno de los temas más demandados por nuestros usuarios en redes sociales. Ya hemos explicado otras veces cómo hacerlo con PHP, pero esta vez te explicaremos cómo llevarlo a cabo con AngularJS. Es decir, en este tutorial aprenderemos a subir varias imágenes al servidor en Angular con PHP y MySQL. Para que se entienda mejor, dividiremos el tutorial en sencillos pasos. Subiremos las imágenes en una carpeta del servidor y después insertaremos la información en la base de datos MySQL. También, extraeremos las imágenes de la tabla de la base de datos y las mostraremos en una sencilla galería.

La estructura del ejemplo será la siguiente:

  • index.php
  • angular_upload.js
  • image_upload.php
  • show_images.php

Crear tabla de la base de datos MySQL

Antes que nada, debemos crear nuestra tabla images en la base de datos MySQL utilizando la siguiente query.

CREATE TABLE `images` (
`id` int(11) NOT NULL,
`file_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Incluir Bootstrap y los archivos de Angular

En este ejemplo realizaremos el diseño con Bootstrap y la funcionalidad de la subida de imágnes con AngularJS, así que tendremos que incluir sendas librerías.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Crear el formulario de subida

Ahora tendremos que crear el formulario de subida de archivos en el fichero index.php

<div class="container" ng-app="galleryapp" ng-controller="uploadController" ng-init="show_images()">
<h2>Angular File Upload with PHP and MySQL</h2>
<br>
<div class="row" >
<div class="col-md-6">
<input type="file" file-input="files" multiple />
<br>
<button class="btn btn-info" ng-click="uploadImage()">Upload</button>
</div>
<div style="clear:both"></div>
<br /><br />
<div class="col-md-3" ng-repeat="image in uploaded_images">
<img ng-src="upload/{{image.file_name}}" width="200" height="200" class="show_images" />
</div>
</div>
</div>

Subida de ficheros con Angular

En el fichero angular_upload.php crearemos la directiva de Angular uploadImage para subir varias imágenes al servidor realizando un petición Ajax a image_upload.php. También hemos creado una función llamada show_images() para obtener de la base de datos las imágenes subidas y mostrarlas cuando cargue la página o cuando se suban vía Ajax llamando al fichero show_images.php

var gallery_app = angular.module("galleryapp", []);
gallery_app.directive("fileInput", function($parse){
return{
link: function($scope, element, attrs){
element.on("change", function(event){
var files = event.target.files;
$parse(attrs.fileInput).assign($scope, element[0].files);
$scope.$apply();
});
}
}
});
gallery_app.controller("uploadController", function($scope, $http){
$scope.uploadImage = function(){
var form_data = new FormData();
angular.forEach($scope.files, function(file){
console.log(file);
form_data.append('file[]', file);
});
$http.post('image_upload.php', form_data,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
}).success(function(response){
alert(response);
$scope.show_images();
});
}
$scope.show_images = function(){
$http.get("show_images.php")
.success(function(data){
$scope.uploaded_images = data;
});
}
});

Subir imágenes del lado del servidor

Ahora en mage_upload.php gestionaremos la subida de imágenes e insertaremos la información relativa a dichas imágenes en nuestra tabla de la base de datos.

<?php
include_once("db_connect.php");
foreach($_FILES['file']['name'] as $key=>$val){
$upload_dir = "upload/";
$upload_file = $upload_dir.$_FILES['file']['name'][$key];
$filename = $_FILES['file']['name'][$key];
if(move_uploaded_file($_FILES['file']['tmp_name'][$key],$upload_file)){
$insert_sql = "INSERT INTO images(file_name) VALUES ('".$filename."')";
mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
}
}
echo 'File uploaded and saved in database successfully.';
?>

Mostrar las imágenes

Por último, en el fichero show_images.php, extraeremos las imágenes de la base de datos y las devolveremos en formato JSON.

<?php
include_once("db_connect.php");
$sql = "SELECT file_name FROM images ORDER BY id DESC";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$total_records = '';
while($record = mysqli_fetch_array($resultset)) {
$total_records[] = $record;
}
echo json_encode($total_records);
?>

Fuente: phpzag.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP