How to preview image before upload in HTML? - javascript

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

Related

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 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/

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.

jQuery alert not work in ie on onchange

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

Categories

Resources