AngularJS Multiple Images Upload with Preview using PHP MySQLi

AngularJS Multiple Images Upload with Preview using PHP MySQLi

In this Post We Will Explain About is AngularJS Multiple Images Upload with Preview using PHP MySQLi With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Upload Multiple Images Using PHP MySQLi and angularjs Example

In this post we will show you Best way to implement Upload Multiple Images with angularjs Ajax and PHP MySQLi, hear for Upload Multiple Images With Image Preview Using angularjs,Ajax And PHP MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Angular Multiple File Upload with PHP and MySQLi


Phase 1: Make MySQL Database Table

First I will Make simple MySQL database table images using below Script to manully run and insert some uploaded images records.

Also Read :   Ajax Image Upload using PHP and jQuery

CREATE TABLE `images` (
`id` int(11) NOT NULL,
`img_name` varchar(255) NOT NULL

Phase 2: Include CDN Bootstrap and Angular Files

In this POST I have All the Form handled design CSS with Bootstrap and multiple image upload Example using PHP, MySQLi AngularJS, so I will Some CDN Live include Bootstrap with AngularJS some javascript files.

<link rel="stylesheet" href="" />
<script src=""></script>

Steps3: Make File Upload Form

After that I will Make Angular file data Image upload form in index.php file.

<div class="container" ng-app="portfolioApp" ng-controller="liveCtrl" ng-init="preview_images()">
<h2>Simple Angular File Upload with PHP and MySQLi Example</h2>
<div class="live row" >
<div class="live col-md-6">
<input type="file" file-input="files" multiple />
<button class="btn btn-info" ng-click="multiImgUpload()">Upload</button>
<div style="clear:both"></div>
<hr /><hr />
<div class="col-md-3" ng-repeat="image in uploaded_images">
<img ng-src="upload/{{image.img_name}}" width="250" height="250" class="preview_images" />

Phase 4: Handle Antgular File Upload

In upload_imgmul.js file, I will make custom js Angular directive multiImgUpload to upload All the Image multiple file/Image to the PHP server by making jQuery Ajax request to upload_multiImg.php. I will use file data as well as append into form DOM data object to send to the PHP server using jquery Ajax request to serevr side PHP script. I have also made preview_images() methods for Retriving multiple uploaded images from MySQLi database and preview on page load as well as when multiple images uploaded by making jquery Ajax some http request to preview_images.php.

Also Read :   Limit Words and Characters in content WordPress

var imgSlider_app = angular.module("portfolioApp", []);
imgSlider_app.directive("fileInput", function($parse){
link: function($scope, element, attrs){
element.on("change", function(event){
var files =;
$parse(attrs.fileInput).assign($scope, element[0].files);
imgSlider_app.controller("liveCtrl", function($scope, $http){
$scope.multiImgUpload = function(){
var live_form_dta = new FormData();
angular.forEach($scope.files, function(file){
live_form_dta.append('file[]', file);
$'upload_multiImg.php', live_form_dta,
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
$scope.preview_images = function(){
$scope.uploaded_images = data;

Phase 5: Handle Multiple Images Upload at PHP Server Side

After that in upload_multiImg.php, I will handle multiple Files or images upload to PHP Based server and also insert multiple uploaded images details into Large MySQLi database table.

foreach($_FILES['file']['name'] as $key=>$val){
$dir_upload = "upload/";
$img_upload = $dir_upload.$_FILES['file']['name'][$key];
$filename = $_FILES['file']['name'][$key];
$query_insert = "INSERT INTO images(img_name) VALUES ('".$filename."')";
mysqli_query($db_con, $query_insert) or die("database error: ". mysqli_error($db_con));
echo 'Your File uploaded and saved in database successfully.';

Phase 6: Display Upload Images

After that finally in preview_images.php, I will Retrive uploaded All the images from PHPMYADMIN MySQL database table All the Image images table and return as name and id JSON response to display on page.

Also Read :   Laravel Create REST API Step By Step with Authentication

$sql = "SELECT img_name FROM images ORDER BY id DESC";
$datares = mysqli_query($db_con, $sql) or die("database error:". mysqli_error($db_con));
$all_recData = '';
while($record = mysqli_fetch_array($datares)) {
$all_recData[] = $record;
echo json_encode($all_recData);

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example


I hope you have Got What is Angular Multiple File Upload with PHP MySQLi And how it works.I would Like to have FeedBack From My Blog( readers.Your Valuable FeedBack,Any Question,or any Comments about This Article( Are Most Always Welcome.