Image file preview before upload using css
Uploading Image file to the webserver is very common. We use HTML file type input for file upload, by default HTML file upload control doesn’t preview file. But if you want to show selected image file preview before upload and select only image file. Then this post is a complete solution for this. So enjoy coding with Girfa Student Help blog.
<html>
<head>
<title>Preview file before upload</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.fileUpload {
position: relative;
overflow: hidden;
margin-top: 0px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<div class="fileUpload btn
btn-primary">
<span>Browse</span>
<input type="file" class="upload" onchange="readURL(this)" id="fileNews" accept="image/x-png,image/jpeg" /><br />
</div><br />
<img id="blah" /><br />
</body>
</html>
No comments:
Post a Comment