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
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]);
};
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);
});
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 tried to create image preview function with JQuery. It's work with IE,Chrome,Firefox and Edge. but din't work with Safari.
This is my code:
<!-- JQuery -->
<script>
function bacaGambar(input) {
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#preview").change(function(){
bacaGambar(this);
});
</script>
Thank's.
Try to replace ids with classes in your html for Safari to work properly.
Modify $("#img_prev") to $(".img_prev") and $("#preview") to $(".preview").
This advice is taken from the related question: Jquery condition works in all browsers except safari.