Insurance: In this instructional exercise, we will make a Picture upload involving Ajax in PHP. This code will upload a picture document to the MySQLi data set with the assistance of ajax solicitation to forestall page invigorate. The framework utilizes jQuery ajax to transfer a picture record to the MySQLi server by forestall the web invigorate and alter HTML component properties to show the getting information. This is an easy to understand sort of program that feels free to the client in your application.
We will utilize jQuery, a JavaScript system that plan to improve on HTML DOM tree crossing and control. It can recover DOM and control every property of a component in view of various standards like id, class, and so on.
How to Startup
First, you have to download & install XAMPP or any local server that runs PHP scripts. Here’s the link for the XAMPP server https://www.apachefriends.org/index.html.
Also, this is the connection for the jquery that I utilized in this instructional exercise https://jquery.com/.
In conclusion, this is the connection for the bootstrap that I utilized for the design plan https://getbootstrap.com/.
Starting Up Database
Open your data set web server then make a data set name in it db_ajax_image; from that point onward, click Import, then find the information base document inside the organizer of the application then click alright.
Open your any kind of text editor(notepad++, etc..). Then just copy/paste the code below then name it conn.php.
Creating The Interface
This is where we will create a simple form for our application. To create the forms simply copy and write it into your text editor, then save it as index.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">PHP - Ajax Image Upload</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-4">
<form>
<div class="form-group">
<input type="file" id="image" class="form-control"/>
</div>
<br />
<center><button type="button" class="btn btn-primary" id="upload">Upload</button></center>
</form>
</div>
<div class="col-md-8" id="result" style="padding:10px; border:1px solid #000;"></div>
</div>This code contains the main function of the application. This code will upload image file when the button is clicked. To make this just copy and write these block of codes below inside the text editor, then save it as shown below
get_image.php
<?php
require_once 'conn.php';
$query=mysqli_query($conn, 'SELECT * FROM `image`') or die(mysqli_error());
while($fetch=mysqli_fetch_array($query)){
echo "<img src='".$fetch['location']."' style='float:left; margin:15px;' width='100' height='100'/>";
}
?>Upload.php
<?php
require_once 'conn.php';
if(!empty($_FILES['image'])){
$image_name = $_FILES['image']['name'];
$image_temp = $_FILES['image']['tmp_name'];
$image_size = $_FILES['image']['size'];
$exp = explode(".", $image_name);
$ext = end($exp);
$allowed_ext = array('jpg', 'jpeg', 'png');
if(in_array($ext, $allowed_ext)){
$image = time().'.'.$ext;
$location = "upload/".$image;
if($image_size < 5242880){
move_uploaded_file($image_temp, $location);
mysqli_query($conn, "INSERT INTO `image` VALUES('', '$image', '$location')") or die(mysqli_error());
echo "success";
}else{
echo "error3";
}
}else{
echo "error2";
}
}else{
echo "error1";
}
?>Scripts.js
$(document).ready(function(){
display_image();
function display_image(){
$.ajax({
url: 'get_image.php',
type: 'POST',
data: {res: 1},
success: function(data){
$('#result').html(data);
}
});
}
$('#upload').on('click', function(){
var image = $('#image');
var image_data = image.prop('files')[0];
var formData = new FormData();
formData.append('image', image_data);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
contentType:false,
cache: false,
processData: false,
success: function(data){
if(data == "success"){
alert('Image Uploaded');
display_image();
}else if(data == "error1"){
alert("Please upload file first!");
}else if(data == "error2"){
alert('Wrong Image format');
}else if(data == "error3"){
alert('File too large to upload');
}
}
});
});
});
