HOW TO SEE PREVIEW OF IMAGES BEFORE UPLOAD
<form id="form">
<input type='file' id="file" />
<br/>
<span style="color:red"> Note: Please select only image file (eg: .png, .jpeg, .jpg, .gif etc)</span><br/>
<img id="img" src="http://placehold.it/200x200" alt="No image uploaded" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
$("#file").change(function () {
readImgPath(this);
});
// read image path
function readImgPath(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
})
</script>
No comments:
Post a Comment