Develop Reference

View Uploaded PDF in Lightgallery

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]);
}
}

Jquery image upload same image not uploading issue

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.

How to preview image before upload in HTML?

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

Pass input into onchange event

I have an input that looks like this
<input type="file" onchange="readURL(this);" value="" class="my_files" name="my_files[0]"></input>
and when the value changes it calls this function
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
alert(e.type)
$('.my_preview').attr('src', e.target.result);
$('.vehicle_preview').delay(700).slideDown('slow');
};
reader.readAsDataURL(input.files[0]);
}
}
The purpose of all this is to generate a preview image when one is uploaded. The problem is that I can't target the my_preview I want because I am not passing anything I can use in to find the closest one .... any suggestions? I should add that the complication comes from the fact that there are multiple uploads possible.

Preview an image before it is uploaded, hide broken img

The basic code is in Preview an image before it is uploaded codes also are shown in below:
<script type="text/javascript">
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]);
}
}
</script>
<body>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
Codes work fine, but it shows broken image icon when there is no img is selected. I tried to use
if($('#img_prev').attr('src',"#"){
$('#img_prev').hide();
}
But it hides all images.
Any help is welcome! Thank you for your time.

Just make the CSS display:none on #blah and then modify your JS to have this function:
function readURL(input) {
var $prev = $('#blah'); // cached for efficiency
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$prev.attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$prev.show(); // this will show only when the input has a file
} else {
$prev.hide(); // this hides it when the input is cleared
}
}
This should appropriately show/hide the img when the input changes.
By the way, you should really not use inline calls like onchange= if you are using jQuery. Something like this is much better:
<script type="text/javascript">
;(function($){
function readURL(input) {
var $prev = $('#blah');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$prev.attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$prev.show();
} else {
$prev.hide();
}
}
$('#imgInput').on('change',function(){
readURL(this);
});
})(jQuery);
</script>
<body>
<form id="form1" runat="server">
<input id="imgInput" type='file' />
<img id="blah" src="#" alt="your image" />
</form>
</body>
This encapsulates all logic in one place, much easier to maintain. The next step, of course, is to have this in an external file rather than on the page, but that is beyond the scope of this.