am trying to upload multiple images using jquery. but same images are not uploading. how to solve this issue please check my fiddle
$images = $('.imageOutput')
$(".imageUpload").change(function(event){
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
$.each(input.files, function() {
var reader = new FileReader();
reader.onload = function (e) {
$images.append('<img src="'+ e.target.result+'" />')
}
reader.readAsDataURL(this);
});
}
}
click here for jsfiddle
Just set the value of your file input to null once you are done with fetching the URL like below:
http://jsfiddle.net/q9Lx1Lss/23/
$images = $('.imageOutput')
$(".imageUpload").change(function(event){
readURL(this);
this.value = null; //setting the value to null
});
function readURL(input) {
if (input.files && input.files[0]) {
$.each(input.files, function() {
var reader = new FileReader();
reader.onload = function (e) {
$images.append('<img src="'+ e.target.result+'" />')
}
reader.readAsDataURL(this);
});
}
}
You were getting issue because on second time after selecting the same image, change event was not getting fired because of same file selection. Now after adding this.value = null; code we are clearing the previous file selection and hence every time change event will get executed irrespective of whether you select same file or different one.
Related
How can I compare an image input to an image stored in my public folder in JavaScript?
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#pic')
.attr('src', e.target.result)
.width(600)
.height(600);
};
reader.readAsDataURL(input.files[0]);
}
}
function matching(input){
if ($('src',e.target.result)=="public_coffee.jpg") {
var x = document.createElement("IMG");
x.setAttribute("src", "public_coffee.jpg");
x.setAttribute("width", "304");
x.setAttribute("height", "228");
document.body.appendChild(x);
exit();
}
}
I am very new to JavaScript. The first function allows me to upload and view an image and it works. The second function should compare the uploaded image with an image in my public folder and then display that image. This second function does not work. What am I doing wrong or not seeing? Could you guys help me out?
Hi i have these codes to read the file the user has uploaded:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#myImg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
And the output is a whole chunk of data:
Is there any way i can get the path from the data? for example C:\Users\blackLeather\Desktop
If no,is there another way to get the image directory without having to add into another folder?
Is there any way i can get the path from the data?
No. None at all. That information is not provided to the JavaScript layer by the browser, for security reasons.
Add this in element:
onchange="loadFile(event)
var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};
I have this code to pre-visualise the pic we selected in the form.
It works fine when there is only one picture but I don't know what do modify if I want multiple files to be selected and previsualised for multiple pictures.
I tried to copy paste this one time per pic but seems not to work like this (I am not so good in js).
How should I modify it to make it work for image 1, image 2, image3, etc...
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image1').css('backgroundImage', "url(" + e.target.result + ")" );
}
reader.readAsDataURL(input.files[0]);
}
}
$("#profile-img1").change(function(){
readURL(this);
});
When I select a image it should preview a image. But when I add my var image_row to onchnage it does not work.
I am trying to make it work with my onclick function function add_popup_image()
Codepen Example Here
Working single id
$("#fileupload_extra_image").change(function(){
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#input-popup-image').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
Not Working
$('#fileupload_extra_image' + image_row).change(function(){
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#input-popup-image' + image_row).attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
Question: How Can I Make The + image_row work with my image preview script
The below was your problem:
image_row used to return always +1 i.e. if there existed
input-popup-image1 then it retrieved input-popup-image2. For time
being I just negated the value before searching for the id. You just
need to take care of the increment of image_row or the below code would just work fine.
Pen Here
$('#fileupload_extra_image' + image_row).on('change',function(){
if (this.files && this.files[0]) {
var reader = new FileReader();
var imgrw=image_row-1;
reader.onload = function (e) {
$('#input-popup-image' + imgrw).attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
UPDATE
To the problem you mentioned in your comments I would suggest to choose the below approach:
Updated Pen
Add a classname for the dynamically added controls image_preview and browse and then obtain its preview content which will be inside its root parent .row. So, this will avoid obtaining with id and keeping track of image_row value:
$(document).on('change','.file',function(){
if (this.files && this.files[0]) {
var imgpr=$(this).parents('div.row').find('.imgpr')
var reader = new FileReader();
reader.onload = function (e) {
$(imgpr).attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
$('#fileupload_extra_image' + image_row).change(function(){
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#input-popup-image' + image_row).attr('src', e.target.result);
image_row++;
}
reader.readAsDataURL(this.files[0]);
}
});
The problem is that you update image_row before the callback function for reader actually runs. What's happening is that you add an event listening on fileupload_extra_image + image_row for a change event which is fine. Then, it looks like you do a check for files and you do another event listener for reader on load. Note that this doesn't actually run this line of code yet:
$('#input-popup-image' + image_row).attr('src', e.target.result);
It's just simply saying that when reader is done loading, then run it.
Your function then continues and updates image_row which cause the previous line to use a value of 2 instead.
What my fix does is updates image_row only after a successful load is done.
i am having a code for creating a preview of image using jquery..
well that is working fine.. but the problem comes when i want the height and width of that preview image..
here is my jquery function..
$(function() {
$('.cvrupload').change(function(){
cvrpre(this);
var newfl_h = $('.cvr').find("img").height(),
newfl_w = $('.cvr').find("img").width();
alert(newfl_h); // this line does not show any height, it shows null
e.preventDefault();
});
});
function cvrpre(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.cvr').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
EDIT
if i use $('.cvr').height() instead of $('.cvr').find("img").height() then it gives the height of previous image which was in $('.cvr')
the problem is, that the code goes on before your cvrpre function is finished. you should return width and height within your cvrpre function. so it would work