Hello friends in this post, we will learn how to upload files using AngularJS using PHP programming script. This is my AngularJS tutorial where we learn how to load files with AngularJS with PHP without refreshing the page. In this we load the image and save it in the folder, we have also saved the name of the image in the database table and retrieve the data from the database image and display it on the website with AngularJS. If you are looking for a tutorial in AngularJS to upload images with PHP code to the server. If you are working on a web project based on AngularJS with back-end like PHP and want to add an image loading function in this project, you can follow this tutorial to load angled javascript images with PHP as a server. When we have selected an image, the image is successfully uploaded to the server and also displayed on the website. So this is my tutorial on loading files with JavaScript angle code using PHP script. In this tutorial we learned how to create a custom JavaScript directive to upload files to the server. In this directive, we saved data from selected files and executed the file load function and used this data from selected files in the file load function and we added it to the form data object and the form data object data is displayed using the http publishing method sent to the server and we need to write the php code to upload the file to the server, and when the file is uploaded to the server, the file name is also inserted into the data table. After you have carried out the selection function, you can call up image data from the data table and display images on our site. This is all we are discussing in this video that we are adding to this post.
Source Code
Database
--
-- Table structure for table `tbl_images`
--
CREATE TABLE IF NOT EXISTS `tbl_images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data for table `tbl_images`
--
index.php
<!DOCTYPE html>
<html>
<head>
<title>MyitBuddies Tutorials | AngularJS-File Upload with PHP Script</title>
<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>
</head>
<body>
<br />
<h3 align="center">AngularJS-File Upload with PHP Script</h3><br />
<br />
<div class="container" ng-app="myapp" ng-controller="myController" ng-init="select()">
<div class="col-md-4">
<input type="file" file-input="files" />
</div>
<div class="col-md-6">
<button class="btn btn-info" ng-click="uploadFile()">Upload</button>
</div>
<div style="clear:both"></div>
<br /><br />
<div class="col-md-3" ng-repeat="image in images">
<img ng-src="upload/{{image.name}}" width="200" height="200" style="padding:16px; border:1px solid #f1f1f1; margin:16px;" />
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.directive("fileInput", function($parse){
return{
link: function($scope, element, attrs){
element.on("change", function(event){
var files = event.target.files;
//console.log(files[0].name);
$parse(attrs.fileInput).assign($scope, element[0].files);
$scope.$apply();
});
}
}
});
app.controller("myController", function($scope, $http){
$scope.uploadFile = function(){
var form_data = new FormData();
angular.forEach($scope.files, function(file){
form_data.append('file', file);
});
$http.post('upload.php', form_data,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
}).success(function(response){
alert(response);
$scope.select();
});
}
$scope.select = function(){
$http.get("select.php")
.success(function(data){
$scope.images = data;
});
}
});
</script>
upload.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(!empty($_FILES))
{
$path = 'upload/' . $_FILES['file']['name'];
if(move_uploaded_file($_FILES['file']['tmp_name'], $path))
{
$insertQuery = "INSERT INTO tbl_images(name) VALUES ('".$_FILES['file']['name']."')";
if(mysqli_query($connect, $insertQuery))
{
echo 'File Uploaded';
}
else
{
echo 'File Uploaded But not Saved';
}
}
}
else
{
echo 'Some Error';
}
?>
select.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = '';
$query = "SELECT * FROM tbl_images ORDER BY id DESC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.