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