Multiple Image Preview using jQuery

Submitted by: 
Language: 
Visitors have accessed this post 318 times.

This tutorial will teach you how to preview multiple images before uploading using jQuery.

Note: jQuery used in this tutorial is hosted, so, you might need internet connection for it to work.

index.html

This contains our input file that we have customize and our preview area.

  1. <!DOCTYPE html>
  2. <title>Multiple Image Preview using jQuery</title>
  3. <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  4. " rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri...</a> <link href="<a href="https://fonts.googleapis.com/css?family=Open+Sans"" rel="nofollow">https://fonts.googleapis.com/css?family=Open+Sans"</a> rel="stylesheet">
  5. <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min....</a> rel="stylesheet">
  6. body{
  7. font-family: 'Open Sans', sans-serif;
  8. }
  9. .button {
  10. background-color: #4CAF50;
  11. border: none;
  12. color: white;
  13. padding: 16px 32px;
  14. text-align: center;
  15. text-decoration: none;
  16. font-size: 16px;
  17. margin: 4px 2px;
  18. cursor:pointer;
  19. font-family: 'Open Sans', sans-serif;
  20. }
  21. .main{
  22. margin-top:50px;
  23. }
  24. .hidden{
  25. display:none;
  26. }
  27. .h10{
  28. height:10px;
  29. }
  30. #filetext{
  31. margin-left:10px;
  32. }
  33. .title{
  34. font-size:25px;
  35. }
  36. .container {
  37. margin : 50px auto 0 auto;
  38. width:50%;
  39. }
  40. #filebutton{
  41. margin : 50px auto 0 auto;
  42. }
  43. #preview{
  44. margin-top:50px;
  45. }
  46. </style>
  47. </head>
  48. <div id="container">
  49. <div class="main">
  50. <span class="title"><strong><center>Multiple Image Preview using jQuery</center></strong></span>
  51. <span><center>by <a href="<a href="https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a></center></span>
  52. ">https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a></cen...</a> <div class="h10"></div>
  53. <input type="file" name="file" id="file" class="hidden" multiple>
  54. <center><button type="button" class="button" id="filebutton"><i class="fa fa-upload"></i><span id="filetext">Select File</span></button></center>
  55. <div id="preview"></div>
  56. </div>
  57. </div>
  58. <script src="custom.js"></script>
  59. </body>
  60. </html>

custom.js

This contains our jQuery for the input file custom and image preview.

  1. $(document).ready(function(){
  2. $('#filebutton').click(function(){
  3. $('#file').click();
  4. });
  5.  
  6. $('#file').change(function(){
  7.  
  8. var name = $(this).val().split('\\').pop();
  9. var file = $(this)[0].files;
  10. if(name != ''){
  11. if(file.length >=2){
  12. $('#filetext').html(file.length + ' files ready to upload');
  13. }
  14. else{
  15. $('#filetext').html(name);
  16. }
  17. }
  18. });
  19.  
  20. $('#file').on("change", previewImages);
  21. });
  22.  
  23. function previewImages() {
  24.  
  25. var $preview = $('#preview').empty();
  26. if (this.files) $.each(this.files, readAndPreview);
  27.  
  28. function readAndPreview(i, file) {
  29.  
  30. if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
  31. return alert(file.name +" is not an image");
  32. } // else...
  33.  
  34. var reader = new FileReader();
  35.  
  36. $(reader).on("load", function() {
  37. $preview.append($("<img>", {src:this.result, height:200}));
  38. });
  39.  
  40. reader.readAsDataURL(file);
  41.  
  42. }
  43.  
  44. }

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.