Hi in the below code I am going to upload the image using following java script function.for the first input working fine.In the same way how to call second input field when I am passing the id it's got changes the first one and second one images are displaying same.
html
<div class="person_pic">
<label>Please upload your photo</label><input type='file' name="image" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</div>
<div class="person_pic">
<label>Please upload your family photo</label>
<input type='file' name="image" onchange="readURL(this);" />
<img id="blah1" src="#" alt="your image" />
</div>
javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah1')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
You can try passing the id of the img element that you want to change.As you are using $('#blah') for both the function call , hence both the time same image is being displayed.You can do this:
<script>
function readURL(input,x) {
if (input.files && input.files[0]) {
var reader = new FileReader();
x = '#'+x;
reader.onload = function (e) {
$(x)
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<div class="person_pic">
<label>Please upload your photo</label>
<input type='file' name="image" onchange="readURL(this,'blah');" />
<img id="blah" src="#" alt="your image" />
</div>
<div class="person_pic">
<label>Please upload your family photo</label>
<input type='file' name="image" onchange="readURL(this,'blah1');" />
<img id="blah1" src="#" alt="your image" />
</div>
Related
If I'm using img tag and after clicking simple button - image preview working:
HTML
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" /> <--- in this place img
</form>
JS
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]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
But when I'm trying to hide button and make image clickable (to achieve it using input type="image") preview not working, after choosing image no effect, not changing default image).
Default clickable image is like "Click here to upload photo".
HTML
<form runat="server">
<div class="thumb-preview">
<input type="image" id="blah" src="<?=path?>/images/upload.png"/> <-- input type image
<input type='file' id="imgInp" style="display: none;" />
</div>
</form>
JS
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]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
$("input[type='image']").click(function() {
$("input[id='imgInp']").click();
});
Have you ideas how to change the image of input type="image"?
You need to use e.PreventDefault method in your click function to to make sure your click type=image is not reloading the page every time you click on it.!
Live Demo:
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]); // convert to base64 string
}
}
$("#imgInp").change(function(e) {
e.preventDefault()
readURL(this);
});
$("input[type='image']").click(function(e) {
e.preventDefault()
$("input[id='imgInp']").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form runat="server">
<div class="thumb-preview">
<input type="image" id="blah" src="https://img.icons8.com/dotty/80/000000/upload.png"/>
<input type='file' id="imgInp" style="display: none;" />
</div>
</form>
Is there a better way of doing this in js? Or more so, how would I do this better in js?
So I don't have 3 scripts basically the same.
Thank you for any help in advance
<label for="img1">Image 1:</label>
<input type="file" id="img1" name="img1" />
<img id="image1"/>
<script>
document.getElementById("img1").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("image1").src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
};
</script>
<label for="img2" >Image 2:</label>
<input type="file" id="img2" name="img2" />
<img id="image2"/>
<script>
document.getElementById("img2").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("image2").src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
};
</script>
<label for="img3">Image 3:</label>
<input type="file" id="img3" name="img3" />
<img id="image3"/>
<script>
document.getElementById("img3").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("image3").src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
};
</script>
Trying to explain myself a little better.
For example in python, loop through something and use the i in the function.
gg = ("a", "q", "f", "4", "f", "h")
for i in range(len(gg)):
print ('thing'+str(i))
<label for="img1">Image 1:</label>
<input type="file" id="img1" name="img1" />
<img id="image1"/>
<label for="main_img">Image 2:</label>
<input type="file" id="img2" name="img2" />
<img id="image2"/>
<label for="main_img">Image 3:</label>
<input type="file" id="img3" name="img3" />
<img id="image3"/>
<script>
imgOnChange('img1','image1');
imgOnChange('img2','image2');
imgOnChange('img3','image3');
function imgOnChange(imgId, imageId) {
document.getElementById(imgId).onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imageId).src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
};
}
</script>
Can you please take a look at this snippet and let me know why I am not able to target the closest image element to file input
$('.file').on('change', function(ev) {
var f = ev.target.files[0];
var fr = new FileReader();
fr.onload = function(ev2) {
$(this).closest('.img').attr('src', ev2.target.result);
$(this).find('.img').attr('src', ev2.target.result);
$(this).next('.img').attr('src', ev2.target.result);
};
fr.readAsDataURL(f);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />
As you can see I already tried
$(this).closest('.img').attr('src', ev2.target.result);
$(this).find('.img').attr('src', ev2.target.result);
$(this).next('.img').attr('src', ev2.target.result);
but it is not doing the job
you have to find img closest to the input file which changes, so you must use ev.target because inside the second function scope changes and this does not refer to file input anymore, something like this seems to work:
$('.file').on('change', function(ev) {
var f = ev.target.files[0];
var fr = new FileReader();
fr.onload = function(ev2) {
$(ev.target).next('.img').attr('src', ev2.target.result);
};
fr.readAsDataURL(f);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />
I am trying to make a page where Taking input from a text field, dynamically create multiple file input field. After uploading an image , the image will be previewed in the document.
HTML part
<body>
<input type="number" id="total_member" name="total_member" value="">
Go
<form id="form" runat="server">
</form>
</body>
javascript part
<script type='text/javascript'>
var input_id;
$(window).load(function(){
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#'+'target'+input_id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".image").change(function(){
var target_input = $(this).attr('id');
input_id=target_input;
readURL(this);
});
});
function memberdetails()
{
var number = document.getElementById("total_member").value;
var container = document.getElementById("form");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
var image=document.createElement("img");
image.setAttribute("id","target"+i);
image.setAttribute("style","width:250px; height: 250px");
image.src="../images/default.png";
container.appendChild(image);
var file=document.createElement("input");
file.type="file";
file.setAttribute("id",i);
file.setAttribute("class","image");
container.appendChild(file);
}
}
Instead of the above HTML part if I write
<input type='file' id="1" class="image" />
<img id="target1" src="#" style="width:250px; height: 250px;" />
<input type='file' id="2" class="image" />
<img id="target2" src="#" style="width:250px; height: 250px;" />
Then these two sections work. The input fields which is created by js doesn't work.What's the problem?
I'm using Drag and Drop to upload images, but how can I preview my image before saving?
var obj = $('.drop');
obj.on('drop', function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border',"2px dotted #bdc3c7");
var files = e.originalEvent.dataTransfer.files;
var file = files[0];
});
I've been looking around and found about FileReader but I have no idea how to implement
Please try
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<br>
<img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
</form>
And your JS part :
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);
});
I hope it helps. Please take a look on this fiddle