I am using javascript code.this code show the image which image you select before uploading.
Javascript
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
Html
<form id="imageform" method="post" enctype="multipart/form-data" >
<input type="file" name="photoimg" id="imgInp" >
<img id="blah" src="#" alt="your image" />
<input type="submit" Value="Upload">
</form>
This piece of code work perfectly.SO i need normaly when image not select than image dispaly:none; and if image select than show image.i want to handle this problem with client side scripting.
Modify the markup so that the image is hidden by default:
<img id="blah" src="#" alt="your image" style="display:none" />
And then call the jQuery show method on the image when you have read the file like so:
$('#blah').attr('src', e.target.result);
$('#blah').show();
Fiddle is here
Try
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').prop('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery(function () {
$("#imgInp").change(function () {
readURL(this);
});
})
Demo: Fiddle
Related
How can I display an image I uploaded immediately in HTML using button like a profile picture
Thank you
<div>
<img id="myImg" class="img img-circle" src="#" alt="your image"
height=200 width=100>
</div>
<input type='file' />
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
$('#yourImage').attr('src', e.target.result);
};
So you essentially want an image preview without a page reload? Here is some code that will do just that.
HTML:
<img id="myImg" alt="your image" class="img img-circle" style="visibility: hidden; display: none" height="200" width="100">
<input type="file" onchange="showimagepreview(this)" accept=".png,.jpg,.jpeg,.gif" />
JavaScript:
function showimagepreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("myImg").setAttribute("src", e.target.result);
document.getElementById("myImg").style = "visibility: visible; display: inline";
}
reader.readAsDataURL(input.files[0]);
}
}
Your code already successfully displays the image preview. As far as I understand your question you intend to display the full image on button click.
You will need an image for that
<img id="yourImage">
on file upload you will need to store the src somewhere, for the sake of simplicity that will be a global variable here:
var src = "";
and then:
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
src = e.target.result;
};
and the button click:
$("#yourbutton").click(function() {
$("#yourImage").att("src", src);
});
So basically you want to use an image as a button.Here is the solution you are looking for
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>
$(function(){
$("#dagger").click(function(){
alert("click");
});
});
Trying to upload an image file with preview using Jquery. It's working and I got the preview, but when I click on the upload button I saw an error message
Uncaught RangeError: Maximum call stack size exceeded
in the console.
Here is the code:
$(document).ready(function() {
var readURL = function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.profile-image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".file-upload").on('change', function() {
readURL(this);
});
$(".upload-button").on('click', function() {
$(".file-upload").click();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img class="profile-image" src="demo.png" alt="Profile Image">
<a class="profile-img-edit upload-button">
<i class="fas fa-camera"></i> Select Image
<input class="file-upload" type="file" name="file" size="40" accept=".png, .jpg, .jpeg, .gif">
</a>
</div>
The issue is because the click event on the .file-upload element bubbles up to .upload-button and is caught by the click handler, which triggers a click handler on .file-upload which bubbles up to .upload-button which triggers a click... and so on.
To fix this, stop the event from bubbling up from the .file-upload by adding a click event handler to it and calling stopPropagation() on the event, like this:
$(document).ready(function() {
var readURL = function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.profile-image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".file-upload").on('change click', function(e) {
e.stopPropagation();
readURL(this);
});
$(".upload-button").on('click', function() {
$(".file-upload").click();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img class="profile-image" src="demo.png" alt="Profile Image">
<a class="profile-img-edit upload-button">
<i class="fas fa-camera"></i> Select Image
<input class="file-upload" type="file" name="file" size="40" accept=".png, .jpg, .jpeg, .gif">
</a>
</div>
Having a hard time fixing my two upload file.My Problem is when i upload a photo in the first form file, the preview displays same photo both in the two form for file and ngo_logo and the same as when i upload photo in the second form file for ngo_logo, it displays the same photo both in the form.The first one is always overridden.Anyone could help me out here is much appreciated.
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Proof of Accreditation<em>(Upload File)</em>:</label>
{!! Form::file('file',['class'=>'form‐control','id'=>'file' ]) !!}
</div>
<div class="form-group">
<img id="fil" src="#" name="file" class="img-responsive well" alt="Image" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Organizational Logo:</label>
{!! Form::file('ngo_logo',['class'=>'form‐control','id'=>'ngo_logo' ]) !!}
</div>
<div class="form-group">
<img id="logo" src="#" name="ngo_logo" class="img-responsive well" alt=" Your Image" />
</div>
</div>
/Javascript/
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#fil').attr('src', e.target.result);
//$('#logo').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#logo').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}/**end of function readURL(input)**/
$("#file").change(function(){
readURL(this);
});
$("#ngo_logo").change(function(){
readURL(this);
});
</script>
You don't need to read file twice, just need to target correct element and set src.
You can use DOM relationship to target the desired element and set the SRC. there are various methods to traverse DOM with current element context i.e. event.target
function readURL(event) {
var input = event.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(event.target)
.closest('form-group') //Target parent form control div
.next() //Target sibling of parent form control
.find('img') //Target Ima
.attr('src', e.target.result); //Set image
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file, #ngo_logo").change(readURL);
References
.closest()
.find()
.next()
As an alternative, you can associate the element using data-* prefixed attributes.
{!! Form::file('file',['class'=>'form‐control','id'=>'file', data-target=>'#fil' ]) !!}
{!! Form::file('ngo_logo',['class'=>'form‐control','id'=>'ngo_logo', data-target=>'#logo' ]) !!}
and in the event handler read it using $.fn.data() or Element.dataset property.
function readURL(event) {
var input = event.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(event.target).data('target').attr('src', e.target.result);
//$(event.target.dataset.target).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
{!! Form::file('file',['class'=>'form‐control','id'=>'file' ]) !!}
Replace id=>file with id=>fil because your image id is fil.
<img id="fil" src="#" name="file" class="img-responsive well" alt="Image" />
You can find the working file at Jsfiddle
/* JavaScript */
function readURL() {
var $input = $(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$input.next('.blah').attr('src', e.target.result).show();
$input.after('<input type="button" class="delbtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".imgInp").change(readURL);
$("form").on('click', '.delbtn', function(e) {
var $input = $(this);
$input.next('.blah').attr('src', e.target.result).hide();
$input.prev('.imgInp').val("");
$(this).closest(".delbtn").remove();
});
<form name="" action="" method="post">
<div class="div">
<input type='file' class="imgInp blah" />
<img class="blah" src="#" alt="your image"/></div>
<br>
<br>
<div class="div">
<input type='file' class="imgInp" />
<img class="blah" src="#" alt="your image"/></div>
</form>
Display and remove image is working fine.
But if the image already selected and again select another new image then preview function is not working. Also remove button keep adding. Please check the error image below.
Click to view the error
I have updated your fiddle at following link,
https://jsfiddle.net/balasuar/97dzkf70/20/
When first time you select the image, the next element of the button is the image. But once the image selected, you added theRemove button element next to the file control. So the next time, it breaks as the image is no longer next to the file control.
I fixed it below by having a reset method to clear this.
function readURL() {
var $input = $(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
reset($input.next('.delbtn'), true);
$input.next('.blah').attr('src', e.target.result).show();
$input.after('<input type="button" class="delbtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".imgInp").change(readURL);
$("form").on('click', '.delbtn', function(e) {
reset($(this));
});
function reset(elm, prserveFileName){
if(elm && elm.length > 0) {
var $input = elm;
$input.next('.blah').attr('src', '').hide();
if(!prserveFileName){
$input.prev('.imgInp').val("");
}
elm.remove();
}
}
I need to preview the image before upload.I was able to pass the file path from view to controller,in the controller using memory stream class i am trying to preview the image before saving it to database.Could any one provide me any sample or example for this
Thanks!
<script type="text/javascript">
function readfile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<form id="form1">
<input type='file' onchange="readfile(this);" />
<img id="image_preview" src="#" alt="your image" width="200" height="200"/>
</form>
I have created bin also, try using this link http://codebins.com/codes/home/4ldqpc4
Please check below urls
http://weblogs.asp.net/imranbaloch/archive/2010/04/03/image-preview-in-asp-net-mvc.aspx
image upload and preview in mvc 2