แสดงตัวอย่างรูป ก่อน upload image preview berfore upload

เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee
preview upload

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ preview upload





สร้างโฟลเดอร์สำหรับเก็บไฟล์ชั่วคราว ชื่อ temp

Code ไฟล์ image_preview.php

<script language="javascript">
function show_pic(sc){
	document.form1.action='php_upload.php';
	document.form1.target='mypre';
	document.form1.submit();	
}
</script>

<span id="mypic1"></span>
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
  <input type="file" name="file" onchange="show_pic(this.value);" />
  <input type="submit" name="Submit" value="Submit" />
</form>
<iframe name="mypre" width="0" height="1" frameborder="0"></iframe>

Code ไฟล์ php_upload.php

<?php
function upimg($img,$imglocate){
			global $file_up;
			if($img['name']!=''){
			$fileupload1=$img['tmp_name'];
			$g_img=explode(".",$img['name']);
			$file_up=time().".".$g_img[1];
				if($fileupload1){
					$array_last=explode(".",$file_up);
					$c=count($array_last)-1;
					$lastname=strtolower($array_last[$c]);
					if($lastname=="gif" or $lastname=="jpg" or $lastname=="jpeg" or $lastname=="swf"){					
						@copy($fileupload1,$imglocate.$file_up);			
					}	
				}				
			}
}
if($_FILES['file']['name']!=""){
	upimg($_FILES['file'],"temp/");
	echo "<script language=\"javascript\">";
	echo "var pl=top.document.getElementById('mypic1');";
	echo "pl.innerHTML=\"<img src='temp/".$file_up."' width='50' height='50' />\";";
	echo "top.document.form1.action='';";
	echo "top.document.form1.target='';";
	echo "</script>";
	echo "<meta http-equiv=\"Refresh\" content=\"0;URL=php_upload.php?d_img=".$file_up."\" />";
}
?>
<?php
	if($_GET['d_img']!=""){
		@unlink("temp/".$_GET['d_img']);
	}
?>

คลิกดูตัวอย่างผลลัพธ์ได้ที่นี้ คลิก



   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017


เนื้อหานี้ ล้าสมัยแล้ว ลองใช้เป็น html5 ตามตัวอย่างนี้แทน
http://www.ninenik.com/content.php?arti_id=551


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: upload preview







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ