Upload an Image Using PHP and MySQL with Stylish UI Design

Upload an Image Using PHP and MySQL with Stylish UI Design:

For uploading an image, the html form should be like this.

<form action="" method="post" enctype="multipart/form-data"></form>

Some rules to follow for the HTML form above:

Make sure that the form uses method="post"
The form also needs the following attribute: enctype="multipart/form-data". It specifies which content-type to use when submitting the form

Without the requirements above, the file upload will not be working.

Other things to notice:

The type="file" attribute of the <input> tag shows the input field as a file-select control, with a "Browse" button next to the input control

Creating an upload script:

For uploading an image the $_FILES is a global variable. This variable is an associate double dimension array and keeps all the information related to uploaded file. PHP can create another five following variable:

$_FILES['file']['tmp_name'] − Stores the name of the temporary file.
$_FILES['file']['name'] − Stores the original filename from the client.
$_FILES['file']['size'] − the size in bytes of the uploaded file.
$_FILES['file']['type'] − the MIME type of the uploaded file.
$_FILES['file']['error'] − the error code associated with this file upload.

Using $_FILES['file']['tmp_name'], Your file will temporary store on this path $_FILES['image_path']['tmp_name']. so when you move it will be remove from temp folder to your folder. If you use copy command instead of move_uploaded_file then your temp file will be stay in your server's temp folder. you can search file name in there.

Upload an Image into database using PHP and MySQL:

<html>
<head>
<title>Upload an Image into database using PHP and MySQL</title>
</head>
<body>
<form action =" " method = "POST" enctype = "multipart/form-data">
<div class = "form-group">
<label>Select an Image</label>
<input class = "form-control" name = "c_pic" type = "file" />
<input type = "submit" value = "Upload" class = "btn btn-sm btn-success pull-right">
</div>
</form>

 <?php

$c_pic = $_FILES["c_pic"]["name"];

if($_FILES["c_pic"]["name"] == Null) {

$c_pic = "";

}else{

$c_pic = date('Ymdhis');

$c_pic = $c_pic.".jpg";

@move_uploaded_file($_FILES["c_pic"]["tmp_name"], "UploadFolder/$c_pic");

}

$insert=mysql_query("INSERT INTO `customer` ( `c_image`) VALUES ('$c_pic')");
?>

Show the uploaded image from Database:

<table class= "table">
<thead>
<tr>
<th>Serial No</th>
<th>Image</th>
</tr>
</thead>

<tbody>
<?php
$si = 1;

$uid = 10;

$qry = mysql_query("SELECT * FROM `customer` WHERE `c_id`='$uid'");
while( $res = mysql_fetch_array($qry)){
//echo $res['c_image'];
echo "<tr>";
echo "<td>".$si++."</td>";
echo "<td>";
echo "<img src = 'UploadFolder/$res[c_image]' height='500px' width='500px' class='img-thumbnail img-fluid'>";
echo "</td>";
echo "</tr>";
}

?>

</tbody>

</table>

Upload an Image into database with file validation:

<?php
if(isset($_FILES['image'])){
$error = array();
$file_name = $_FILES['image']['name'];
$file_size = $_FILES['image']['size'];
$file_tmp = $_FILES['image']['tmp_name'];
$file_type = $_FILES['image']['type'];
$file_ext = strtolower(end(explode('.',$_FILES['image']['name'])));

$expension = array("jpeg","jpg","png");

if(in_array($file_ext,$expensions)=== false){
$error[]="extension not allowed, please choose a JPEG or PNG file.";
}

if($file_size > 2097152) {
$error[]='File size must be excately 2 MB';
}

if(empty($error)==true) {
move_uploaded_file($file_tmp,"images/".$file_name);
echo "Success";
}else{
print_r($error);
}
}
?>
<html>
<body>
<form method = "POST" enctype = "multipart/form-data">
<input type = "file" name = "image" />
<input type = "submit"/>
<ul>
<li>Sent file: <?php echo $_FILES['image']['name']; ?>
<li>File size: <?php echo $_FILES['image']['size']; ?>
<li>File type: <?php echo $_FILES['image']['type'] ?>
</ul>
</form>
</body>
</html>

Image Uploading Using PHP and MySQL with Image Preview:

<?php
$c_pic = $_FILES["document_image"]["name"];
if($_FILES["document_image"]["name"] == Null) {
$c_pic="";
}else{
$c_pic=date('Ymdhis');
$c_pic=$c_pic.".jpg";
@move_uploaded_file($_FILES["document_image"]["tmp_name"], "../shop_images/$c_pic");

}

$insert = $con->query("INSERT INTO `temporary_tax`(`shop_id`, `document_image`) VALUES ('13', '$c_pic') ");
?>
<html>
<head>
<title>Upload an image</title>
</head>
<body>

<div class="form-group">
<label class="text-label">Document File</label>
<br>
<img class="form-control-file" id="showImage" src="Upload/legal_documents/document.png" width="150px" height="200px">
<br>
<input type="file" class="form-control" name="document_image" onchange="readURL(this);">
</div>
</body>
</html>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#showImage').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
</script>

Image Uploading with allowed file extension using PHP and MySQL:

<!DOCTYPE>
<html>
<head>
<title>Uploading an image with allowed file extension using PHP and MySQL</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="imageToUpload" id="imageToUpload">
<input type="submit" value="Upload Image" name="save">
</form>
</body>
</html>

<?php
if (isset($_POST["save"])) {

// create an array with allowed file extension
$allowed = array('gif', 'png', 'jpg');
$filename = $_FILES['imageToUpload']['name'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if (!in_array($ext, $allowed)) {
echo 'This file extension is not allowed';
}else{
echo "This file extension is allowed";
}
}
?>

File upload UI Design Bootstrap:

Using the following code sample you can easily create the above image upload UI design.

<!DOCTYPE>
<html>
<head>
<title>File upload UI Design Bootstrap</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<label><b>Upload Image</b></label><br>
<label>
<input type='file' onchange="readURL(this);" style="display:none"/>
<img id="showImage" src="img/plus.png" style="width: 100px; height: 100px; background-color: red; border: 2px solid red; border-radius: 5px; cursor: pointer;"/>
</label><i class="fa-file-image-o" aria-hidden="true"></i>
</form>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#showImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>

Drag and Drop Design for file Upload Image:

<!DOCTYPE html>
<html>
<head>
<title>Custom File Upload Drag and Drop</title>
<style>
body {
font-family: sans-serif;
background-color: #eeeeee;
}
.file-upload {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
padding: 20px;
}

.file-upload-button {
width: 100%;
margin: 0;
color: #fff;
background: #1FB264;
border: none;
padding: 10px;
border-radius: 4px;
border-bottom: 4px solid #15824B;
transition: all .2s ease;
outline: none;
text-transform: uppercase;
font-weight: 700;
}

.file-upload-button:hover {
background: #1AA059;
color: #ffffff;
transition: all .2s ease;
cursor: pointer;
}

.file-upload-button:active {
border: 0;
transition: all .2s ease;
}

.file-upload-content-area {
display: none;
text-align: center;
}

.file-upload-input-field {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
cursor: pointer;
}

.image-upload-area {
margin-top: 20px;
border: 4px dashed #1FB264;
position: relative;
}

.image-dropping,
.image-upload-area:hover {
background-color: #1FB264;
border: 4px dashed #ffffff;
}

.image-title-wrap {
padding: 0 15px 15px 15px;
color: #222;
}

.drag-text {
text-align: center;
}

.drag-text h3 {
font-weight: 100;
text-transform: uppercase;
color: #15824B;
padding: 60px 0;
}

.file-upload-image {
max-height: 200px;
max-width: 200px;
margin: auto;
padding: 20px;
}

.remove-image {
width: 200px;
margin: 0;
color: #fff;
background: #cd4535;
border: none;
padding: 10px;
border-radius: 4px;
border-bottom: 4px solid #b02818;
transition: all .2s ease;
outline: none;
text-transform: uppercase;
font-weight: 700;
}

.remove-image:hover {
background: #c13b2a;
color: #ffffff;
transition: all .2s ease;
cursor: pointer;
}

.remove-image:active {
border: 0;
transition: all .2s ease;
}
</style>
</head>
<body>
<div class="file-upload">
<button class="file-upload-button" type="button" onclick="$('.file-upload-input-field').trigger( 'click' )">Upload Image</button>

<div class="image-upload-area">
<input class="file-upload-input-field" type='file' onchange="readURL(this);" accept="image/*" />
<div class="drag-text">
<h3>Drag and drop a Image or Upload Image</h3>
</div>
</div>
<div class="file-upload-content-area">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
<button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button>
</div>
</div>
</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {
$('.image-upload-area').hide();

$('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content-area').show();

$('.image-title').html(input.files[0].name);
};

reader.readAsDataURL(input.files[0]);

} else {
removeUpload();
}
}

function removeUpload() {
$('.file-upload-input-field').replaceWith($('.file-upload-input-field').clone());
$('.file-upload-content-area').hide();
$('.image-upload-area').show();
}
$('.image-upload-area').bind('dragover', function () {
$('.image-upload-area').addClass('image-dropping');
});
$('.image-upload-area').bind('dragleave', function () {
$('.image-upload-area').removeClass('image-dropping');
});

</script>

Tutorial Stars

Upload an Image Using PHP and MySQL with Stylish UI Design