image upload with preview in jquery
How image upload with preview in jquery
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<script src="js/jquery-3.2.1.min.js"> </script>
<style type="text/css">
#imagePreview {
width: 180px;
height: 180px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
</style>
</head>
<body>
<script type="text/javascript">
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
</script>
<div id="imagePreview"></div>
<input id="uploadFile" type="file" multiple name="image" class="img" />
</body>
</html>
Post A Comment
No comments :
Thanks For visiting Infotech Solutuion Blog