ต้องการให้รูปที่ browse โชว์ใน textarea ของรายละเอียดโพสต์ ต้องทำไงค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ต้องการให้รูปที่ browse โชว์ใน textarea ของรายละเอียดโพสต์ ต้องทำไงค่ะ

ต้องการให้รูปที่ browse โชว์ใน textarea ของรายละเอียดโพสต์ ต้องทำไงค่ะ

ถ้าต้องการให้รูปที่ browse เเล้วไปโชว์ใน textarea ของรายละเอียดโพสต์ ไม่ทราบต้องทำยังไงค่ะ 
จากที่เขียนไว้มันโชว์เป็นภาพเล็กนิดเดียวค่ะอยู่หลังปุ่ม browse

<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">


<script language="JavaScript">
	function showPreview(ele)
	{
		document.form2.img.src=ele.value;
	}
</script>

<script language="javascript">
function fncSubmit()
        {
        
            if(document.form2.txttopic_name.value == "")
            {
                alert('กรุณาตั้งชื่อโพสต์ด้วยค่ะ');
                document.form2.txttopic_name.focus();
                return false;
            }	
			
			if(document.form2.txttopic_detail.value == "")
            {
                alert('กรุณาใส่รายละเอียดโพสต์ด้วยค่ะ');
                document.form2.txttopic_detail.focus();		
                return false;
            }
			if(document.form2.QPic.value != "")
			{
				<? move_uploaded_file($_FILES['QPic']['tmp_name'],"vdo/".$_FILES["QPic"]["name"]) ?>
			}
 			document.form2.submit();
        }
</script>

</head>
<body>

<div id='newsfeed_contain'>
<div class='block_news_add'>

<form id="form2" name="form2" method="post" enctype="multipart/form-data" action="add_topic.php" onsubmit="return fncSubmit();">


<table width='660px' >
<tr>
<td valign='top' width="150px"><label for="exampleInputPassword1">ชื่อโพสต์: </label></td>
<td valign='top'>
                    <input name="txttopic_name" type="text" id="textfield" value="" size="69" class="form-control" placeholder="พิมพ์ชื่อโพสต์" />
                  </td>
</tr>

<tr>
<td valign='top' width="150px" ><label for="exampleInputPassword1">รายละเอียดโพสต์: </label></td>
<td valign='top'>
                    <textarea name="txttopic_detail" cols="70" rows="10" id="txttopic_detail" class="form-control" placeholder="พิมพ์รายละเอียดโพสต์"   ></textarea>
                  </td>
</tr>

<tr>
<td valign='top' width="150px" ><label for="exampleInputPassword1">รูปภาพ/วิดีโอ: </label></td>
<td valign='top'>เเนบไฟล์หรือรูปภาพ &nbsp;</br> <input type="file" name="QPic" OnChange="showPreview(this)"  on />
</td>
</tr>

<tr>
<td valign='top'></td>
<td valign='top'>&nbsp;</td>
</tr>

<tr>
<td colspan="2" valign='top'> <input name="Submit" type="submit" class="btn btn-default" id="Submit" value="   โพสต์   " /> 
<input name="Cancel" type="button" value="ยกเลิกการโพสต์" onClick="window.location='profile_wall.php'" class="btn btn-default"/ > 
</td>
</tr>
</table>
           </form>
           
</div>

</div>
 
</body>
</html>

ชื่อโพสต์:
รายละเอียดโพสต์:
รูปภาพ/วิดีโอ:	เเนบไฟล์หรือรูปภาพ

Nathakarn 20-11-2014 23:59:27

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ถ้า textarea ปกติ ไม่น่าจะทำได้ นอกจากจะใช้เป็น rich text คล้ายๆ ckeditor

เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์ชั่น 4.4.1

https://www.ninenik.com/content.php?arti_id=503 via @ninenik

แต่โดยทั่วไป จะไม่รวมเข้าด้วยกันตอนโพส แต่ถ้าหากแสดงพรีวิวก่อนอัพ ดูตัวอย่างโค้ดตัวไปนี้เป็นแนวทาง

แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย

https://www.ninenik.com/content.php?arti_id=551 via @ninenik

ninenik 21-11-2014

ความคิดเห็นที่ 2

ขอบคุณค่ะ เดี๋ยวจะลองดูค่ะ

nathakarn 21-11-2014 22:26

ความคิดเห็นที่ 3

<!--head html-->
<?php include_once 'head_html.php';?>
<!--css style-->
<?php include_once 'js.php';?>
 
<script language="JavaScript">
	function showPreview(ele)
	{
		document.form2.imgAvatar.src=ele.value;
	}
</script>


<script language="javascript">
function fncSubmit()
        {
        
            if(document.form2.txttopic_name.value == "")
            {
                alert('กรุณาตั้งชื่อโพสต์ด้วยค่ะ');
                document.form2.txttopic_name.focus();
                return false;
            }	
			
			if(document.form2.txttopic_detail.value == "")
            {
                alert('กรุณาใส่รายละเอียดโพสต์ด้วยค่ะ');
                document.form2.txttopic_detail.focus();		
                return false;
            }
			if(document.form2.QPic.value != "")
			{
				<? move_uploaded_file($_FILES['QPic']['tmp_name'],"vdo/".$_FILES["QPic"]["name"]) ?>
			}
 			document.form2.submit();
        }
</script>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >  
$(function () {  
  
  
    $("#upload").on("click",function(e){  
        $("#QPic").show().click().hide();  
        e.preventDefault();  
    });  
    $("#QPic").on("change",function(e){  
        var files = this.files  
        showThumbnail(files)          
    });  
  
    function showThumbnail(files){  
  
        $("#thumbnail").html("");  
        for(var i=0;i<files.length;i  ){  
            var file = files[i]  
            var imageType = /image.*/  
            if(!file.type.match(imageType)){  
                //     console.log("Not an Image");  
                continue;  
            }  
  
            var image = document.createElement("img");  
            var thumbnail = document.getElementById("thumbnail");  
            image.file = file;  
            thumbnail.appendChild(image)  
  
            var reader = new FileReader()  
            reader.onload = (function(aImg){  
                return function(e){  
                    aImg.src = e.target.result;  
                };  
            }(image))  
  
            var ret = reader.readAsDataURL(file);  
            var canvas = document.createElement("canvas");  
            ctx = canvas.getContext("2d");  
            image.onload= function(){  
                ctx.drawImage(image,100,100)  
            }  
        } // end for loop  
  
    } // end showThumbnail  
  
  
      
      
});  
 </script>      


</head>
<body>
<div id='newsfeed_contain'>

<form id="form2" name="form2" method="post" enctype="multipart/form-data" action="add_topic.php" onsubmit="return fncSubmit();">
<table width='600px' >
<tr>
<td valign='top'>ชื่อโพสต์: </td>
<td valign='top'><label>
                    <input name="txttopic_name" type="text" id="textfield" value="" size="48" />
                  </label></td>
</tr>

<tr>
<td valign='top' >รายละเอียดโพสต์: </td>
<td valign='top'><label>
                    <textarea name="txttopic_detail" cols="50" rows="10" id="txttopic_detail"></textarea>
                  </label></td>
</tr>

<tr>
<td valign='top' >รูปภาพ/วิดีโอ: </td>
<td valign='top'><input type="file" name="QPic"  />
<div id="thumbnail"></div>  </td>
</tr>

<tr>
<td valign='top'></td>
<td valign='top'>&nbsp;</td>
</tr>

<tr>
<td colspan="2" valign='top'> <input name="Submit" type="submit" class="btn btn-default" id="Submit" value="   โพสต์   " /> 
<input name="Cancel" type="button" value="ยกเลิกการโพสต์" onClick="window.location='news_feedANDFriend.php'"/ > 
</td>
</tr>
</table>
           </form>
           
</div>

 
</body>
</html>

ลองทำตามลิ้งค์นี้เเล้วค่ะ เเต่รูปก็ยังไม่เเสดงอยู่ดีค่ะ ไม่ทราบมีตรงไหนผิดรึป่าวค่ะ

แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย

https://www.ninenik.com/content.php?arti_id=551 via @ninenik

nathakarn 26-11-2014 18:07

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน