-->
  Multiple Image Preview using jQuery PHP

Multiple Image Preview using jQuery PHP

Multiple Image Preview using jQuery PHP
Multiple Image Preview using jQuery PHP
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. 

  2. 
<html>
    

    3. 

  3. 
<head>
    

    4. 

  4. 
<title>Multiple Image Preview using jQuery</title>
    

    5. 

  5. 
<script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    

    6. 

  6. 
" 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">
    

    7. 

  7. 
<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">
    

    8. 

  8. 
<style>
    

    9. 

  9. 
body{
    

    10. 

  10. 
font-family: 'Open Sans', sans-serif;
    

    11. 

  11. 
}
    

    12. 

  12. 
.button {
    

    13. 

  13. 
background-color: #4CAF50;
    

    14. 

  14. 
border: none;
    

    15. 

  15. 
color: white;
    

    16. 

  16. 
padding: 16px 32px;
    

    17. 

  17. 
text-align: center;
    

    18. 

  18. 
text-decoration: none;
    

    19. 

  19. 
font-size: 16px;
    

    20. 

  20. 
margin: 4px 2px;
    

    21. 

  21. 
cursor:pointer;
    

    22. 

  22. 
font-family: 'Open Sans', sans-serif;
    

    23. 

  23. 
}
    

    24. 

  24. 
.main{
    

    25. 

  25. 
margin-top:50px;
    

    26. 

  26. 
}
    

    27. 

  27. 
.hidden{
    

    28. 

  28. 
display:none;
    

    29. 

  29. 
}
    

    30. 

  30. 
.h10{
    

    31. 

  31. 
height:10px;
    

    32. 

  32. 
}
    

    33. 

  33. 
#filetext{
    

    34. 

  34. 
margin-left:10px;
    

    35. 

  35. 
}
    

    36. 

  36. 
.title{
    

    37. 

  37. 
font-size:25px;
    

    38. 

  38. 
}
    

    39. 

  39. 
.container {
    

    40. 

  40. 
margin : 50px auto 0 auto;
    

    41. 

  41. 
width:50%;
    

    42. 

  42. 
}
    

    43. 

  43. 
#filebutton{
    

    44. 

  44. 
margin : 50px auto 0 auto;
    

    45. 

  45. 
}
    

    46. 

  46. 
#preview{
    

    47. 

  47. 
margin-top:50px;
    

    48. 

  48. 
}
    

    49. 

  49. 
</style>
    

    50. 

  50. 
</head>
    

    51. 

  51. 
<body>
    

    52. 

  52. 
<div id="container">
    

    53. 

  53. 
<div class="main">
    

    54. 

  54. 
<span class="title"><strong><center>Multiple Image Preview using jQuery</center></strong></span>
    

    55. 

  55. 
<span><center>by <a href="<a href="https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a></center></span>
    

    56. 

  56. 
">https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a></cen...</a>  <div class="h10"></div>
    

    57. 

  57. 
<input type="file" name="file" id="file" class="hidden" multiple>
    

    58. 

  58. 
<center><button type="button" class="button" id="filebutton"><i class="fa fa-upload"></i><span id="filetext">Select File</span></button></center>
    

    59. 

  59. 
<div id="preview"></div> 
    

    60. 

  60. 
</div>
    

    61. 

  61. 
</div>
    

    62. 

  62. 
<script src="custom.js"></script>
    

    63. 

  63. 
</body>
    

    64. 

  64. 
</html>
    

    65.

custom.js

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

  1. 
$(document).ready(function(){
    

    2. 

  2. 
$('#filebutton').click(function(){
    

    3. 

  3. 
$('#file').click();
    

    4. 

  4. 
});
    

    5. 

  5. 

    

    6. 

  6. 
$('#file').change(function(){
    

    7. 

  7. 

    

    8. 

  8. 
var name = $(this).val().split('\\').pop();
    

    9. 

  9. 
var file = $(this)[0].files;
    

    10. 

  10. 
if(name != ''){
    

    11. 

  11. 
if(file.length >=2){
    

    12. 

  12. 
$('#filetext').html(file.length + ' files ready to upload');
    

    13. 

  13. 
}
    

    14. 

  14. 
else{
    

    15. 

  15. 
$('#filetext').html(name);
    

    16. 

  16. 
}
    

    17. 

  17. 
}
    

    18. 

  18. 
});
    

    19. 

  19. 

    

    20. 

  20. 
$('#file').on("change", previewImages);
    

    21. 

  21. 
});
    

    22. 

  22. 

    

    23. 

  23. 
function previewImages() {
    

    24. 

  24. 

    

    25. 

  25. 
var $preview = $('#preview').empty();
    

    26. 

  26. 
if (this.files) $.each(this.files, readAndPreview);
    

    27. 

  27. 

    

    28. 

  28. 
function readAndPreview(i, file) {
    

    29. 

  29. 

    

    30. 

  30. 
if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
    

    31. 

  31. 
return alert(file.name +" is not an image");
    

    32. 

  32. 
} // else...
    

    33. 

  33. 

    

    34. 

  34. 
var reader = new FileReader();
    

    35. 

  35. 

    

    36. 

  36. 
$(reader).on("load", function() {
    

    37. 

  37. 
$preview.append($("<img>", {src:this.result, height:200}));
    

    38. 

  38. 
});
    

    39. 

  39. 

    

    40. 

  40. 
reader.readAsDataURL(file);
    

    41. 

  41. 

    

    42. 

  42. 
}
    

    43. 

  43. 

    

    44. 

  44. 
}
    

    45.

    jQuery, PHP, Tutorial