By using CSS, HTML and Javascript we are going to customize a file upload button. Here we are going to create a new file upload button with image on clicking that button it will open up the files so the user will upload the particular file that he wants. To customize a file upload button, take a look below.
Step 1: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>homePage</title>
</head>
<div class="uploadbutton">
<p class="textdiv"><img src="img/add.png">Add Images</p>
<input id="btnupload" type="file" class="upload" />
</div>
<input id="fileupload" placeholder="0 files selected" disabled="disabled" />
<div class="imagediv"></div>
</html>
In the code above, at first we are going to make two input tags with id. “btnupload” is the input which is used to upload the file, and “fileupload” is actually used to display the name of the image being uploaded.
Step 2: CSS
.uploadbutton {
background-color: #bdbdbd;
height: 158px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
width: 199px;
}
.uploadbutton input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.custom-span{ font-family: Arial; font-weight: bold;font-size: 100px; color: #FE57A1}
#fileupload{border: none;margin-left: 10px; width: 200px;}
img {
height: auto;
max-height: 100%;
width: 100%;
}
.textdiv {
color: #585858;
font-family: arial;
font-size: 24px;
font-weight: bold;
height: 100%;
width: 100%;
}
img{ height:auto ;width: 100% }
This is used to style the input file upload button.
Step 3: Javascript
With the help of this script, we display the image as well as name of the image. Make sure you add the correct javascript for the button to make it call the function.
<script type="text/javascript">
document.getElementById("btnupload").onchange = function () {
document.getElementById("fileupload").value = this.value;
};
$(function () {
$(".upload").change(function () {
$(".imagediv").show();
$(".imagediv").append("<img />");
var input = $(this);
console.log(input[0].files);
if (input[0].files && input[0].files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(".imagediv img").attr('src', e.target.result);
}
reader.readAsDataURL(input[0].files[0]);
}
});
});
</script>
In the above code we first append the image tag to the div then we assign a variable which points to the current data. Console.log shows the information about the image such as file type, last modified etc. FileReader interface is the part of FileAPI which lets web applications asynchronously read the contents of files. At that point FileReader class read a image as DataURI and renders a thumbnail by setting the source characteristic of a image tag to an information URL. A uniform resource identifier scheme is known as DataURI that provide us to include the data in-line in your web pages if they were placed in some other location.
The syntax of DataURI is as follows:
data:[<media type>][;base64],<data>
Html looks like this
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJbvbvbvbggg==" alt="Black dot" />
Base64 encoding schemes is used when we need to encode binary data and that data needs be stored and transferred over media that deals with textual data. During transport the data remains intact without modification.
Working demo: https://jsfiddle.net/d92wtj2c/
0 Comment(s)