Uploading images can be broken down into the three following steps.
- An HTML form with a browse button to allow the client to choose which file to upload
- A script to process the upload, validate the file, name it and place it in the file system
- Lastly, a page to advise the client the upload was a success
Also, we are providing the solution to another most frequently asked question reviewing image before uploading into the folder by javascript.
HTML Code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.container{
position: absolute;
width: 500px;
height: 400px;
top: 30%;
left: 50%;
margin: -100px 0 0 -150px;
background: #80808061;
color: white;
border-radius:5px;
}
.container-header{
width: 500px;
margin-left: -15px;
height: 40px;
background: #464646;
color:white;
padding:5px;
font-size:20px;
text-align:center;
margin-bottom:40px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#output{
width:100px;
height:auto;
margin-top:20px;
}
.btn{
margin-top:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="container-header">
Select image to upload
</div>
<form action="upload.php" method="post" enctype="multipart/form-data" id="form1" runat="server">
<div class="col-md-12">
<input type='file' id="imgInp" name="fileToUpload" accept="image/*" onchange="loadFile(event)" class="form-control"/>
<img id="output"/>
</div>
<div class="col-md-12">
<input type="submit" value="Upload Image" name="submit" class="btn">
</div>
</form>
</div>
</body>
<script>
var loadFile = function (event) {
var reader = new FileReader();
reader.onload = function () {
var output = document.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
</html>
PHP Code:
upload.php
<?php
$directory = "uploads/";
$target_file = $directory . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image using getimagesize function
if (isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if ($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists by using file name
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file " . basename($_FILES["fileToUpload"]["name"]) . " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
Result:
Note:
To access the file you uploaded, you need to store the path of the file in the database table which is very simple to do with basic knowledge.
$target_file is the path variable, you can store this variable value directly in the database by normal insertion query.
Also, you need to create uploads folder in the root directory.
No comments:
Post a Comment