How to show image thumbnail before upload with jQuery
Today I am going to show you how to show image thumbnail before uploading image with jQuery, we wrote many tutorials on image upload on PHPGang.com. If you want to give your users an option that they can see image preview before uploading that image to server then you must use this script. We used jQuery to show you preview of thumbnail not complete procedure to upload image using PHP you can read our previous tutorial for upload image to server.
Read More about Image Upload:
How to Upload multiple images jQuery Ajax using PHP
jQuery:
<script type="text/javascript">
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
</script>Above jQuery work on onChange event of your file upload field and add image in background of give div.
HTML:
<div id="imagePreview"></div> <input id="uploadFile" type="file" name="image" class="img" />
CSS used for image div in which we preview thumbnail:
<style>
#imagePreview {
width: 180px;
height: 180px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>That’s all:
So that’s how you can show image thumbnail before uploading image,I hope you like this tutorial please don’t forget to give us your feedback in comments, you can also download code for free and test it on our demo page.
Tutorial Categories:
before uploading photo – can you hide the block ?
unable to get the image
Would be handy to have a clear file field/remove thumnail link as well
Hello
How to image is show as crop how to show the full image (with possibility to resize) ?
Thanks
thank you , this coding working……
the coding works but you must include the jquery library
That’s great article, but how then upload the image file into the folder?
didn’t work. image cannot display but the name appear
I did try everything, loading all kind of jquery but this thing isnt showing thumbnail. Help me
what error you are getting in js. try to debug with firebug.
not working in Safari. Screenshot Attached
Yes. It is not working for Safari.
thnx for the code
$(‘#photoUploadImagePreview’).remove();
$(‘#photoUploadFileLabel’).append($(”))
Instead of bg image you can also append an img tag, than you have the right relative dimensions too. You only need to set the width in css and no need for an extra div.
thnakyou but how to work in same manner for multiple files
Hey Thanks But not working So I need to any Onchange function in Here please help me..
Its working fine check our demo and please try to debug error and post error here.
Hello Huzoor,
In chrome the uploaded image is not scaled to the div’s size and hence only a part of the image can be seen where as in mozilla firefox the uploaded image completely fit’s inside the div.
Also i found that the thumbnail preview is not visible in IE and safari.
Humble request you to post a solution for the same.
Thanks
Hello Huzoor,
In chrome the uploaded image is not scaled to the div’s size and hence only a part of the image can be seen where as in mozilla firefox the uploaded image completely fit’s inside the div.
Also i found that the thumbnail preview is not visible in IE and safari.
Humble request you to post a solution for the same.
Thanks
What should i do if i upload big image. In css You have fixed height and width values. but i want to auto.
When i use auto it’s not working. help Me.
Thank you adavance !
What is auto?
try to fix it in CSS which is the best way.
Yes i tried but i failed.
If I took big image its cropping the image height and width. because you fix the sizes in css like
width: 180px;
height: 180px;
instead of i use
width: auto;
height: auto;
but no result. Please help me.
Thank You
image upload and show thum is fine but how to remove image if i dont want to upload that image?? plz suggest me
thanaks for your tutorial. good one.. now say after this I have a thumbnail of a particular size.. now is it possible to save the thumbnail WITHOUT uploading the image.
what I want is like when i select a file or set of files.. it should show me a thumbnail. and then with a save button I should be able to save those thumbnail. Insted of uploading the actual file and then re-sizing it. This will help me to fast the upload process of files as only It will be viewed in mobile or in low resolution and save data space with data transfer.
please give suggestion how I can just create Thumbnali (or a file of small size then actual size) and then save the file to my server without uploading the actual file.
thanks in advance.. plz. my job is in stake.. guys help me..
How to use two file inputs in a same page using filereader?
I am using filereader js make encoded url of uploaded image, It is working fine when there is a single file input, but when I am using second file input, filereader throws an error.
Can you please give solution of this issue?
Thanks
You can do by using ForLoop, i.e get the count of files and loop over it. or check this article Preview Multiple Image before upload it
I know i am late to comment here, but my comment would be useful for other future readers. 🙂
Thanks for your reply Satinder,
I have fixed this issue by using same class name in two file input, and created filereader object using that common class name.
It works fine for me.
Thanks again for your reply. 🙂
Thanks for your reply Satinder,
I have fixed this issue by using same class name in two file input, and created filereader object using that common class name.
It works fine for me.
Thanks again for your reply. 🙂
thank you Satinder singh
Best.Guide.Ever.
Now I am a fan of your site. I landed here while I was searching for my latest post related to Preview image before upload it, and find it nice. Also catched some nice post too. Good work sir ji. Bookmarking this Site!
Thanks Huzoor Bux
Tried to upload the previewed image into a file but it gave an “index undefined” error
Hi sir..
I copied same code as it is,But image is not displaying Please help me out from this
hello sir,
Your code is very nice and working in my case but I want to see preview for multiple images. So please help me in this regards
I need your help regarding this code. It is working but i need to upload and display multiple files all type of files. such as .txt, pdf,jpg extra. please help me. Thanks
great!! your code is working ok. thanks man..
not able to display on google chrome
Debug and share error.