Preview an image before it is uploaded, hide broken img - javascript

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.

Related

Display a preview of a pdf before upload on chrome

I would like to display a preview of a pdf before upload. It works on firefox but not on chrome. If I try with an image, it works on both.
Here my code:
<input required="required" accept="image/*, application/pdf" class="uploadjs" data-id="3" type="file">
<div class="preview">
<img id="preview-3" alt="">
<embed id="preview-3_1" type="application/pdf">
</div>
function readURL(input, id)
{
var mime= input.files[0].type;
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e)
{
if(mime.split("/")[0]=="image")
{
$('#preview-'+id+'_1').attr('src', '');
$('#preview-'+id).attr('src', e.target.result);
}
else
{
$('#preview-'+id).attr('src', '');
$('#preview-'+id+'_1').attr('src', e.target.result);
}
}
reader.readAsDataURL(input.files[0]);
}
}
$(function()
{
$(".uploadjs").change(function()
{
var id = $(this).data('id')
readURL(this, id);
});
})
And a jsfiddle: https://jsfiddle.net/g9ttqxyj/2/
I have tried multiple ideas like: embed, iframe and object but none works on chrome.

For anyone stumbling upon this:
Encapsulate your embed tag with an object tag.
The data attribute of the object tag has to link to the .pdf.
Change html to:
<object type="application/pdf" data ="#" id="pdfViewer">
<embed id="preview-3_1" type="application/pdf">
</object>
Add this to your jquery:
$('#pdfViewer').attr('data', e.target.result);
https://stackoverflow.com/a/23681394

javascript code to display select image is not working

I've looked other questions and found this code is working but it's not working. I've tried clearing cache in browser but still it's not working. Can anyone tell me what is wrong?
<script>
function showImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#pic').attr('src',e.target.result).width(200).height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
HTML code
<input type="file" name="fupload" onchange="showImage(this);"/>
<img id="pic" src="#" alt="your image" width="200" height="200"/>

Probably you didn't include jQuery!
<script>
function showImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var preview = document.querySelector('#pic'); //-->Added line;
reader.onload = function (e) {
//---Correction is here---
//$('#pic').attr('src',e.target.result).width(200).height(200);
preview.src = reader.result;
};
reader.readAsDataURL(input.files[0]);
}
}
Test it with JsFiddle;

Upload image using jquery or javascript and image should store in my path with out php

Hi i took this code for file upload using jquery or javascsript in jsfiddle given below
http://jsfiddle.net/KyleMit/d3H9f/
<input type='file' />
<img id="myImg" src="#" alt="your image" />
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
};
I want to store image in my folder. but the above code show path like
"data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QNkaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAyMSA3OS4xNTQ5MTEsIDIwMTMvMTAvMjktMTE6NDc6MTYgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9IjY0QzFCQzhBNTEyQzZCNkQwMDA0MDk5OUQ2QUFFMkIzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUyOTRFMjVBQUZCQjExRTM4MEMwQkFCRDY1Mjg5Qzk1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUyOTRFMjU5QUZCQjExRTM4MEMwQkFCRDY1Mjg5Qzk1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBkYWVhYzEzLTgxNWQtNDM2Yy04MjEyLWQ4ZGIzMTdmNTg1ZSIgc3RSZWY6ZG9jdW1lbnRJRD0iNjRDMUJDOEE1MTJDNkI2RDAwMDQwOTk5RDZBQUUyQjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/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"
but i want path like "E:\yello.png" can u help me?

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

How to prevent none images to be seen in browsing using jquery

I want to do is if the user click to browse for files he should see images only no other files. How to do that using jquery?
My problem is I can see and choose other files besides images when i browse.
current output: http://jsfiddle.net/LvsYc/3123/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#Picture').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});

Change your input to:
<input type='file' id="imgInp" accept="image/*" />
http://jsfiddle.net/LvsYc/3124/

Categories

Resources