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 infinityknow.com – 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!.

index.html

Make a HTML file and define markup

[php]

AngularJS Multiple Image upload using PHP

[/php]

app.js

Make a js file and define scripting

[php]
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(){
scope.$apply(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);
$http.post(fileuploaduri, fd, {
transformRequest: angular.identity,
headers: {‘Content-Type’: undefined,’Process-Data’: false}
})
.success(function(){
console.log(“Your File/images Success”);
})
.error(function(){
console.log(“error”);
});
}
}]);

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

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

}]);
[/php]

do_submit_save.php

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.

[php]
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;
}

$db_conn->close();

?>
[/php]

Example

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(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.