How to preview before uploading images using bootstrap imageupload form in jquery and php pdo.

I have already discuss how to upload images in our previous tutorial.

Now in this tutorial, i am just going to show you how we can preview before uploading images with using bootstrap plugin for uploading images.

You can download it freely here from ;github for this plugin.

Now Lets Start,First create database first "upload"

Table structure for table `images`

CREATE TABLE IF NOT EXISTS `images` (
`id` int(14) NOT NULL,
`image` varchar(123) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

File path should be like this

index.php file
db.php file
create.php file
uploads folder

db.php file

<?php
date_default_timezone_set("Asia/Kathmandu");
$db_host = "localhost";
$db_name = "upload";
$db_user = "root";
$db_pass = "";
try{
$db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
$db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
echo $e->getMessage();
}
?>

index.php file

Here we create form and used this plugin as like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onlinestudy.bramento.com></title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<script type="text/javascript" src="../assets/jquery-1.11.3-jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link href="../assets/dist/css/bootstrap-imageupload.css" rel="stylesheet">
<style>
.imageupload {
margin: 20px 0;
}
</style>
</head>
<body>
<form method="post" action="create.php" enctype="multipart/form-data">
<div class="imageupload panel panel-default">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left">Upload Image</h3>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default active">File</button>
<button type="button" class="btn btn-default">URL</button>
</div>
</div>
<div class="file-tab panel-body">
<label class="btn btn-default btn-file">
<span>Browse</span>
<input type="file" name="image">
</label>
<button type="button" class="btn btn-default">Remove</button>
</div>
<div class="url-tab panel-body">
<div class="input-group">
<input type="text" class="form-control hasclear" placeholder="Image URL">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Submit</button>
</div>
</div>
<button type="button" class="btn btn-default">Remove</button>
<input type="hidden" name="image">
</div>
</div>
<button type="button" id="imageupload-disable" class="btn btn-danger">Disable</button>
<button type="button" id="imageupload-enable" class="btn btn-success">Enable</button>
<button type="button" id="imageupload-reset" class="btn btn-primary">Reset</button>
</div>
<button type="submit" class="btn btn-primary" name="Submit" id="btn-save">
<span class="glyphicon glyphicon-plus"></span> Save this Record
</button>
</form>
<script src="../assets/dist/js/bootstrap-imageupload.js"></script>
<script>
var $imageupload = $('.imageupload');
$imageupload.imageupload();
$('#imageupload-disable').on('click', function() {
$imageupload.imageupload('disable');
$(this).blur();
})
$('#imageupload-enable').on('click', function() {
$imageupload.imageupload('enable');
$(this).blur();
})
$('#imageupload-reset').on('click', function() {
$imageupload.imageupload('reset');
$(this).blur();
});
</script>
</body>
</html>

NOw finally create.php file

This file is for php scripts for image uploading process

<?php
require_once 'db.php';
if(isset($_POST['Submit']))
{
$images=$_FILES["image"]["name"];
$image_tmp = $_FILES['image']['tmp_name'];
if($images=='') {
echo "<script>alert('Please Choose Images')</script>";
echo "<script>window.open('index.php','_self')</script>";
}
else { try{
move_uploaded_file($image_tmp,"uploads/$images");
$stmt = $db_con->prepare("INSERT INTO images(image) VALUES( :image)");
$stmt->bindParam(":image", $images);
if($stmt->execute())
{
echo "<script>alert('Successfully Added..')</script>";
echo "<script>window.open('index.php','_self')</script>";
}
else{
echo "Query Problem";
}
}
catch(PDOException $e){
echo $e->getMessage();
}}
}
?>

Mokey Nepal

Pages

Monday, March 27, 2017

preview before uploading images using bootstrap imageupload form in jquery and php pdo.