*ตัวอย่างฟอร์มอัพโหลดภาพและแสดงภาพภาพที่เลือกโดยใช้ javascript (Preview Image after Choose file using javascript)
ในตัวอย่างนี้จะทำฟอร์มง่ายๆ ซึ่งปกติถ้าเราใช้ <input type=”file”> เวลาเราเลือกภาพจะไม่แสดงภาพตัวอย่างในฟอร์มของเรา จึงต้องมีการเพิ่ม code เข้าไปอีก ดังเช่น
|
1 |
onchange="preview_image(event)" |
คือ เมื่อมีการเลือกไฟล์ที่จะอัพโหลด (เช่น ไฟล์ภาพ) จะมีการเรียกใช้ function จาก javascript ในการอ่านไฟล์ภาพและแสดงภาพตัวอย่างที่เราเลือกเข้ามาในฟอร์ม
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type='text/javascript'> function preview_image(event) { var reader = new FileReader(); reader.onload = function() { var output = document.getElementById('showimg'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); } </script> |
code แสดงภาพจากการอัพโหลด
|
1 |
<img id="showimg" alt="" width="300" height="300"> |
ผลการทำงาน
code ทั้งหมด
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <title>Upload image and Preview by devbanban.com</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script type='text/javascript'> function preview_image(event) { var reader = new FileReader(); reader.onload = function() { var output = document.getElementById('showimg'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); } </script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-7"> <h4> ตัวอย่างฟอร์มอัพโหลดภาพและแสดงภาพก่อนบันทึกเข้าฐานข้อมูล </h4> <form action="http://devbanban.com/" method="get" enctype="multipart/form-data" class="form-horizontal"> <div class="form-group"> <div class="col-md-3"></div> <div class="col-md-7"> preview <br> <img id="showimg" alt="" width="300" height="300"> </div> </div> <div class="form-group"> <label class="control-label col-md-3" >เลือกภาพ :</label> <div class="col-md-3"> <input type="file" id="showimg" name="showimg" accept="image/png, image/jpeg, image/gif " onchange="preview_image(event)"> </div> </div> </form> </div> </div> </div> </body> </html> <!-- ref : http://jsfiddle.net/LvsYc/ --> |
*การนำไปประยุกต์ใช้กับการอัพโหลดภาพเข้าฐานข้อมูล
บทความ : upload file เข้าไปในฐานข้อมูล PHP
ฟรีคอร์ส PHP+MySQLi+AdminLTE
ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/