<html>
<head>
<title>File upload preview</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
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(300)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form>
<div class="fileUpload btn
btn-primary">
Browse..
<input type="file" class="upload" onchange="readURL(this)" id="file" accept="image/x-png,image/jpeg" />
</div>
</form>
<img id="blah" /><br />
</body>
</html>
No comments:
Post a Comment