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

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

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

ดูแล้ว 39,579 ครั้ง




สร้างโฟลเดอร์สำหรับเก็บไฟล์ชั่วคราว ชื่อ 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 ตามตัวอย่างนี้แทน
https://www.ninenik.com/content.php?arti_id=551


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





Tags:: preview upload







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





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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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







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