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;
CREATE TABLE `images` (
`id` int(11) NOT NULL,
`file_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
<?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();
}
?>
<!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 -->
</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>
<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');?>
<div class="insert-post-ads1" style="margin-top:20px;">
</div> </div> </body></html>
<?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.';
?>
<?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);
?>
.show_images
{ border:1px solid #f1f1f1; }
.col-md-3 {
width: 22%;
}
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;
});
}
});