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?
Related
I used lightgallery for preview of uploaded image it works well. The same way when I try to open uploaded pdf in lighgallery it is not showing up. But I am able to view pdf when given hardcoded path value in data-src.
img#exeImg.height-100.load-pdf(src="/custom/img/nodata.svg" data-iframe="true" data-src="/custom/img/Manual.pdf")
$('.load-pdf').lightGallery({
selector: 'this'
});
But when try to use uploaded base 64 pdf it is not working
function previewDocuments(input,imgId){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(imgId).attr('src', "/custom/img/fileuploaded.svg");
$(imgId).attr('data-src',e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
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]);
};
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.
I'm trying to upload an image to Imgur using PHP , by sending the Image Base64String as an input :
function el(id) {
return document.getElementById(id);
}
function readImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function (e) {
el("img").src = e.target.result;
el("base").innerHTML = e.target.result.replace(/^data:image\/(png|jpg);base64,/, "");
};
FR.readAsDataURL(this.files[0]);
}
}
el("file").addEventListener("change", readImage, false);
});
the result is :
iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB3ElEQVQ4y+WTv2sTYRjHv76vRzkIGElQ7BUUwUnFElCIg0O3/gXZioOOGfwPIiVjEbJkiGQ6T0HwSh0OIQriUCRQsSaSwWtEeOgLB5cMyUnu7n3PJUIM11iy9hm/z/t8+Ly/gDNX505qENE6gCcAbgP4AeCZYRj7SwGJ6JKUcp9zfv1vJqU85pzfNwzj5yIgSws9z9uYhQEA5/zKcDjc+p9hKpCIrqXlQogbSwF7vZ5Iy13X/bUUsNVqfSYims183/cbjcbbmV1kTg10HOeo2Wy+DIJgDABRFEWmab5pt9tfprC7UsrXRLR5KiCASTab3Q2CYAQAcRyHuq7vAZgQ0T3f9x8LIdaCINieHzyfciFrAB4qpR4xxi4DgKZpWrFYXCGiTaXUiyRJyPO8Y9M0vy40JKIHSql3ALYZY1endlG9XrdHo9EFKaXFGLuYy+Vu9fv9g1qtVl9oGEXRc03T/nkanU6nC8AqFAo7nPNskiSJbdsfqtXqKwBHCw0Hg8HK/ALXdT+WSqWbjuMchmE4sW37fblcfiqE+JZ2+HxuOKPrugZAxnEcjsfj391ut2EYxkY+nw8ty+pVKpUdpdQnAEkacP4v5wCsA1gFkJn2dwHcASABEIDvJ8HOaP0Bvebjy/PZHu8AAAAASUVORK5CYII=
when I editing the img element with the result , it works and I see the Image , but when I send it to Imgur it says : Image format not supported, or image is corrupt, what I'm missing here?
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