<input type="file" id="photo" name="photo" class="file-upload" accept="image/jpg" /> <div id="preview-photo" class="img-box center-block"> <div class="photo-hover"> <div class="photo-hover-content"> <i class="fa fa-image"></i> </div> </div> <img id="preview" class="img img-responsive" src="/images/no-photo.jpg"> </div> <style> .img { width: 100%; height: 100%; display: block; } .img-box { width: 100px; height: 118px; padding: 4px; border: 1px solid lightgray; background-color: white; } .img-box .photo-hover { cursor: pointer; background: rgba(0, 115, 183, .9); position: absolute; width: 90px; height: 108px; opacity: 0; transition: all ease .5s; -webkit-transition: all ease .5s; -moz-transition: all ease .5s; } .img-box .photo-hover:hover { opacity: 1; } .img-box .photo-hover .photo-hover-content { position: absolute; width: 90px; font-size: 20px; text-align: center; top: 50%; margin-top: -12px; color: #fff; } </style> <script> $(document).ready(function () { $('#preview-photo').click(function () { $('#photo').click(); }); $('#photo').change(function () { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#preview').attr('src', e.target.result); } reader.readAsDataURL(this.files[0]); } }); }); </script>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง