<script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#example') .attr('src', e.target.result) .width(100) .height(100); }; reader.readAsDataURL(input.files[0]); } } </script> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 1</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_1" onchange="readURL(this);" /><br /><img id="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 2</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_2" onchange="readURL(this);" /><br /><img id="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 3</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_3" onchange="readURL(this);" /><br /><img id="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 4</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_4" onchange="readURL(this);" /><br /><img id="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 5</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_5" onchange="readURL(this);" /><br /><img id="example" /> </div> </td> </tr>
<img id="example" />
$('.example')
<script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.example') .attr('src', e.target.result) .width(100) .height(100); }; reader.readAsDataURL(input.files[0]); } } </script> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 1</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_1" onchange="readURL(this);" /><br /><img class="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 2</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_2" onchange="readURL(this);" /><br /><img class="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 3</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_3" onchange="readURL(this);" /><br /><img class="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 4</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_4" onchange="readURL(this);" /><br /><img class="example" /> </div> </td> </tr> <tr> <td><label>รูปภาพแสดงรองจากหน้าหลักที่ 5</label></td> <td> <div class="col-sm-4"> <input type="file" class="form-control" name="im_secon_5" onchange="readURL(this);" /><br /><img class="example" /> </div> </td> </tr>
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(input).parent().find('.example').each(function(index, element) { $(element).attr('src', e.target.result).width(100).height(100); }); }; reader.readAsDataURL(input.files[0]); } }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง