01.<input type="file" id="photo" name="photo" class="file-upload" accept="image/jpg" />
02.<div id="preview-photo" class="img-box center-block">
03. <div class="photo-hover">
04. <div class="photo-hover-content">
05. <i class="fa fa-image"></i>
06. </div>
07. </div>
08. <img id="preview" class="img img-responsive" src="/images/no-photo.jpg">
09.</div>
10.
11.<style>
12. .img {
13. width: 100%;
14. height: 100%;
15. display: block;
16. }
17.
18. .img-box {
19. width: 100px;
20. height: 118px;
21. padding: 4px;
22. border: 1px solid lightgray;
23. background-color: white;
24. }
25.
26. .img-box .photo-hover {
27. cursor: pointer;
28. background: rgba(0, 115, 183, .9);
29. position: absolute;
30. width: 90px;
31. height: 108px;
32. opacity: 0;
33. transition: all ease .5s;
34. -webkit-transition: all ease .5s;
35. -moz-transition: all ease .5s;
36. }
37.
38. .img-box .photo-hover:hover {
39. opacity: 1;
40. }
41.
42. .img-box .photo-hover .photo-hover-content {
43. position: absolute;
44. width: 90px;
45. font-size: 20px;
46. text-align: center;
47. top: 50%;
48. margin-top: -12px;
49. color: #fff;
50. }
51.</style>
52.
53.<script>
54. $(document).ready(function () {
55. $('#preview-photo').click(function () {
56. $('#photo').click();
57. });
58.
59. $('#photo').change(function () {
60. if (this.files && this.files[0]) {
61. var reader = new FileReader();
62.
63. reader.onload = function (e) {
64. $('#preview').attr('src', e.target.result);
65. }
66.
67. reader.readAsDataURL(this.files[0]);
68. }
69. });
70. });
71.</script>
