AngularJS Multiple Images uploading using PHP

AngularJS Multiple Images uploading using PHP

In this Post We Will Explain About is AngularJS Multiple Images uploading using PHP 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 AngularJS File Upload using $http post and FormDataExample

In this post we will show you Best way to implement File Upload Using AngularJS with php server script, hear for Angularjs multiple image upload using ajax and phpwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ :  Difference between Factory and Service in Angular


Make a HTML file and define markup


AngularJS Multiple Image upload using PHP



Make a js file and define scripting

var liveApp = angular.module(‘liveApp’, []);

liveApp.directive(‘fileModel’, [‘$parse’, function ($parse) {
return {
restrict: ‘A’,
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;

element.bind(‘change’, function(){
modelSetter(scope, element[0].files[0]);

liveApp.service(‘fileUpload’, [‘$http’, function ($http) {
this.uploadFileToUrl = function(file, fileuploaduri, name){
var fd = new FormData();
fd.append(‘file’, file);
fd.append(‘name’, name);
$, fd, {
transformRequest: angular.identity,
headers: {‘Content-Type’: undefined,’Process-Data’: false}
console.log(“Your File/images Success”);

liveApp.controller(‘liveCtrl’, [‘$scope’, ‘fileUpload’, function($scope, fileUpload){
$scope.multiImagesUpload = function(){
var file = $scope.myimgfile;
console.log(‘file is ‘ );

READ :  VueJS Update Object in array v-for loop

var fileuploaduri = “do_submit_save.php”;
var text = $;
fileUpload.uploadFileToUrl(file, fileuploaduri, text);



PHP server side scripting Languages as well as “do_submit_save.php” PHP file move_uploaded_file to your root folder /upload/products/ put all the images.

connect_error) {
die(“Database Connection failed: ” . $db_conn->connect_error);

$sql_query = “INSERT INTO live_product_mst (name,filename) VALUES (‘”.$name.”‘,'”.basename($_FILES[“file”][“name”]).”‘)”;

if ($db_conn->query($sql_query) === TRUE) {
echo json_encode($_FILES[“file”]); // simple response new file uploaded
} else {
echo “Error: ” . $sql_query . “
” . $db_conn->error;




I hope you have Got What is Angularjs Upload multiple images using jQuery, Ajax, PHP And how it works.I would Like to have FeadBack From My Blog( readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article( Are Most Always Welcome.

READ :  Angularjs Add class to Active Element ng-class Menu

Leave a Reply

Your email address will not be published. Required fields are marked *