This post demonstrates how to display an image prior to uploading it on server.
This demo uses the JavaScript's readAsDataURL method of reader API which will read image as url.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<img id="thumbnail" src="test.png" alt="Image"/>
<div style="clear: both;"></div>
<input type="file" name="file" id="file"/>
<div style="clear: both;"></div>
<button id="btn">Click</button>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '#btn', function() {
console.log('sss');
var reader = new FileReader();
console.log(reader);
reader.onload = function (e) {
$('#thumbnail').attr('src', e.target.result);
}
console.log(file);
reader.readAsDataURL(file.files[0]);
});
});
</script>
</body>
</html>
0 Comment(s)