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.
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]);
}
}
I have modified the function
<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]);
}
}
$("#upload").change(function() {
readURL(this);
});
</script>
and included this input in my form in the body element:
<input type="file" name="uploaded_files" id="upload"/>
<img id="blah" src="#" alt="your image" />
I have also included jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
It’s working in JsFiddle, but it’s not working on my localhost.
There is absolutely nothing wrong with what you have done, neither with your script JS block. You can go and check on this JSFiddle.
Just make sure you are loading the jQuery library correctly since your script depends on.
Try Like
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);
});
Demo
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
Alert not come when onchange event in internet explore ?
i am use below code:
<input type="file" onChange="readURL(this)" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js " > </script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
alert('asf');
reader.onload = function(e) {
//alert(e.target.result);
$('#photoview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
IE9 doesn't have the FileReader.
See compatibility table at end of this MDN documentation. Note that this document also proposes a solution for compatibility with IE.
for IE you have to use FileSystemObject activex component
for more details check this link :
http://www.java2s.com/Tutorial/JavaScript/0600__MS-JScript/FileSystemObjectGetFile.htm
I'm currently trying to make an image preview on the client side of selected image, before the user clicks on a submit button.
I've found this approach here in the forum:
function selectedPhotoText(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview')
.attr('src', e.target.result)
.width(240)
.height(149);
};
reader.readAsDataURL(input.files[0]);
}
else {
$('#imagePreview').attr('src', "../../Images/blqblq.jpg");
}
}
<img id="imagePreview" class="img-border" src="../../Images/blqblq.jpg" alt="Selected Image"/>
and the file upload control:
<asp:FileUpload ID="uploadPhotoDialog" onchange="selectedPhotoText(this)" runat="server"/>
This approach works fine in Chrome, Firefox and Opera. Is there any workarounds for IE and Safari?
Thanks in advance!
Safari to 5.X.X and IE to 9.x.x doesnt support FileReader.
Look this.
http://caniuse.com/filereader