Today, We want to share with you Angular Multiple File Upload with PHP MySQLi.
In this post we will show you PHP Angular multi-file upload, hear for AngularJS Multiple File Upload with PHP/MySQLi we will give you demo and example for implement.
In this post, we will learn about File Upload Using AngularJS with PHP MySQLi with an example.

Angular Multiple File Upload with PHP and MySQLi

There are the Following The simple About Angular Multiple File Upload with PHP and MySQLi Full Information With Example and source code.

Steps 1: Make MySQL Database Table

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

Steps 2: Add simple Bootstrap and Angular libs

<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js</a>

Steps 3: Make File Upload Form

READ :  Angular Call Function on Page Load Example

index.php

<div class="container">
<h2>Angular File Upload with PHP and MySQL</h2>
<br>
<div class="row">
<div class="col-md-6">

<br>
<button class="btn btn-success">Upload</button>
</div>
<div style="clear:both"></div>
<br /><br />
<div class="col-md-3">
<img width="200" height="200" class="show_multiple_img" />
</div>
</div>
</div>

Steps 4: Handle Angular File Upload

angular_upload.js

var infinityApp = angular.module("infinityApp", []);
infinityApp.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();
});
}
}
});
infinityApp.controller("infinityCtrl", function($scope, $http){
$scope.liveFileUpload = 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_multiple_img();
});
}
$scope.show_multiple_img = function(){
$http.get("show_multiple_img.php")
.success(function(data){
$scope.uploaded_multiple_img = data;
});
}
});

Steps5: Handle Multiple Images Upload at Server End

image_upload.php

$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 multiple_img(img_name) VALUES ('".$filename."')";
mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
}
}
echo 'File uploaded and saved in database successfully.';
?>

Steps 6: Display Upload Images

show_multiple_img.php

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read :

READ :  vuejs tab component Dynamic flexible and accessible Vuejs tabs

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about how to upload multiple files in php and store in database demo.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.