Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > preview image แบบหลายแถว ผมรบกวนสอบถามพี่ๆ เกี่ยวกับการ Preview ไฟล์ครับ

preview image แบบหลายแถว ผมรบกวนสอบถามพี่ๆ เกี่ยวกับการ Preview ไฟล์ครับ

เริ่มหัวข้อใหม่

โปรแกรมเมอร์มือใหม่

โพสกระทู้ ( 340 )
บทความ ( 0 )

ผมรบกวนสอบถามพี่ๆ เกี่ยวกับการ Preview ไฟล์ครับ อยากจะให้มันแสดง ภาพเมื่อมีการ เลือกไฟล์ครับ แต่ผมได้แค่ให้มันโชว์แค่ แถวเดียวครับ อยากจะให้มันโชว์มากกว่า 1 แถวครับ

ดัง Code นี้อะครับ

Code (PHP)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

 <script language="JavaScript">
	function showPreview(ele)
	{
			$('#imgAvatar').attr('src', ele.value); // for IE
            if (ele.files && ele.files[0])
			 {
			
                var reader = new FileReader();
				
                reader.onload = function (e) 
				{
                    $('#imgAvatar').attr('src', e.target.result);
                }

                reader.readAsDataURL(ele.files[0]);
            }
	}
</script>
</head>

<body>
 <form id="form1" name="form1" method="post" action="">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" id="dataTable2">
  <?php
  for($i=1;$i<=5;$i++)
  {
  ?>
        <tr>
          <td width="3%">&nbsp;</td>
          <td width="21%" align="center"  valign="top"><img src="add.png" width="171" border="0"  id="imgAvatar"/></td>
          <td width="2%" align="center">&nbsp;</td>
          <td width="74%" align="left"><textarea name="detail[]" cols="45" rows="5" class="ta3" id="detail[]" placeholder="ระบุรายละเอียดด้วยครับ"></textarea>
            <table width="100" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
            <input type="file" name="attach[]" id="attach" OnChange="showPreview(this)" />
            <table width="100" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table></td>
        </tr>
   <?php } ?>
      </table>
</form>
</body>
</html>

Tag : PHP, MySQL, JavaScript

Date : 2015-05-25 15:59:20

By : ขมิบศรี

View : 756

Reply : 3

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

 <script language="JavaScript">
	function showPreview(img,ele)
	{
			$('#'+img).attr('src', ele.value); // for IE
            if (ele.files && ele.files[0])
			 {
			
                var reader = new FileReader();
				
                reader.onload = function (e) 
				{
                    $('#'+img).attr('src', e.target.result);
                }

                reader.readAsDataURL(ele.files[0]);
            }
	}
</script>
</head>

<body>
 <form id="form1" name="form1" method="post" action="">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" id="dataTable2">
  <?php
  for($i=1;$i<=5;$i++)
  {
  ?>
        <tr>
          <td width="3%">&nbsp;</td>
          <td width="21%" align="center"  valign="top"><img src="add.png" width="171" border="0"  id="imgAvatar<?php echo $i;?>"/></td>
          <td width="2%" align="center">&nbsp;</td>
          <td width="74%" align="left"><textarea name="detail[]" cols="45" rows="5" class="ta3" id="detail[]" placeholder="ระบุรายละเอียดด้วยครับ"></textarea>
            <table width="100" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
            <input type="file" name="attach[]" id="attach" OnChange="showPreview('imgAvatar<?php echo $i;?>',this)" />
            <table width="100" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table></td>
        </tr>
   <?php } ?>
      </table>
</form>
</body>
</html>

Date : 2015-05-25 20:48:46

By : mr.win

No. 2

โปรแกรมเมอร์มือใหม่

โพสกระทู้ ( 340 )
บทความ ( 0 )

ขอบคุณครับพี่ mr.win

Date : 2015-05-25 21:15:20

By : ขมิบศรี

No. 3

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Date : 2015-05-26 09:48:31

By : mr.win

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : preview image แบบหลายแถว ผมรบกวนสอบถามพี่ๆ เกี่ยวกับการ Preview ไฟล์ครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก