Menu
I can read the uploaded image by using javascript fileReader but how can i read the uploaded image in jquery so that i can preview the image before uploading ?
244
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#previewHolder').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
} else {
alert('select a file to see preview');
$('#previewHolder').attr('src', '');
}
}
$("#filePhoto").change(function() {
readURL(this);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br/><br/>
<input type="file" name="filePhoto" value="" id="filePhoto" class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg">
<br/><br/>
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px" style="border-radius:3px;border:5px solid red;"/>using javascript
<div class="form-group">
<label for="password" class="form-group">upload Image</label>
<input id="image" type="file" name="image" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])" required="required">
<img id="blah" width="50" height="50" />
</div>To Preview the image before Uploading using jquery
Create an event onchange which will be triggered when selecting any image, function loadImg() can be used to load the image within the frame.
Live example:
function loadImg(){
$('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="file" accept="image/" onchange="loadImg()"><br/>
<img id="frame" width="100px" height="100px"/>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
