Angular Multiple file upload with php and mysql
php code / April 13, 2018
In the wake of getting a colossal reaction for the record transfer likeImage Upload without Page Refresh with PHP and jQuery and Drag and Drop File Upload utilizing jQuery and PHP and Image Upload and Crop in Modal with PHP and jQuery and numerous solicitations for to transfer different pictures utilizing PHP and jQuery. So in this, you will figure out how to transfer different pictures utilizing PHP, jQuery, and MySQL. The has been canvassed in simple strides with live Demo connect and can download the source code from the
Angular Multiple file upload with PHP and MySQL step by step videos Please info me zip file send
malekimtiyajmca@gmail.com
So let’s start the coding. We will have the following file step by step
- index.php
- upload.js
- upload.php
- style.css
Step 1: Create DATABASE phpcodeinformation.sql
CREATE DATABASE phpcodeinformation;Step 2: Create TABLE images
CREATE TABLE `images` (
`id` int(11) NOT NULL,
`file_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Step 3: Create db_connect.php
<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpcodeinformation";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>Step 4: Create header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- jQuery -->
Step 5: Create container.php
</head>
<body class="">
<div role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="https://phpcodeinformation.com/" class="navbar-brand">PHPCODEINFORMATION.COM</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="https://phpcodeinformation.com/">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" style="min-height:500px;">
<div class=''>
</div>Step 6: Create index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>phpzag.com : Demo Angular Multiple File Upload with PHP and MySQL</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>
<script src="angular/angular_upload.js"></script>
<link rel="stylesheet" href="css/style.css" />
<?php include('container.php');?>
<div class="container" ng-app="galleryapp" ng-controller="uploadController" ng-init="show_images()">
<h2>Angular Multiple File Upload with PHP and MySQL</h2>
<br>
<div class="row" >
<div class="col-md-6">
<input type="file" file-input="files" multiple />
<br>
<button class="btn btn-info" ng-click="uploadImage()">Upload</button>
</div>
<div style="clear:both"></div>
<br /><br />
<div class="col-md-3" ng-repeat="image in uploaded_images">
<img ng-src="upload/{{image.file_name}}" width="200" height="200" class="show_images" />
</div>
</div>
<div style="margin:50px 0px 0px 0px;">
<a class="btn btn-default read-more" style="background:#3399ff;color:white" href="http://www.phpzag.com/angular-datatables-server-side-processing-with-php-and-mysql">Back to Tutorial</a>
</div>
</div>
<?php include('footer.php');?>
Step 7: Create footer.php
<div class="insert-post-ads1" style="margin-top:20px;">
Step 8: Create image_upload.php
<?php
include_once("db_connect.php");
foreach($_FILES['file']['name'] as $key=>$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 images(file_name) VALUES ('".$filename."')";
mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
}
}
echo 'File uploaded and saved in database successfully.';
?>Step 9: Create show_images.php
<?php
include_once("db_connect.php");
$sql = "SELECT file_name FROM images ORDER BY id DESC";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$total_records = '';
while($record = mysqli_fetch_array($resultset)) {
$total_records[] = $record;
}
echo json_encode($total_records);
?> Step 10: Create style.css
.show_images
{ border:1px solid #f1f1f1; }
.col-md-3 {
width: 22%;
} Step 11: Create angular_upload.js
var gallery_app = angular.module("galleryapp", []);
gallery_app.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();
});
}
}
});
gallery_app.controller("uploadController", function($scope, $http){
$scope.uploadImage = 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_images();
});
}
$scope.show_images = function(){
$http.get("show_images.php")
.success(function(data){
$scope.uploaded_images = data;
});
}
});