Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > บทความจากสมาชิก > AJAX Upload File / Upload Progress เทคนิคการอัพโหลดไฟล์ด้วย AJAX กับ PHP



 
Clound SSD Virtual Server

AJAX Upload File / Upload Progress เทคนิคการอัพโหลดไฟล์ด้วย AJAX กับ PHP

AJAX Upload File / PHP Upload Progress เทคนิคการอัพโหลดไฟล์ด้วย AJAX กับ PHP
การ Upload ไฟล์ด้วย Ajax เทคโนโลยี่ของ Ajax ตามค่ามาตรฐาน นั้นไม่สามารถรับส่ง Post Data ที่เป็น Binary ผ่าน XMLHttpRequest ได้ ที่บอกว่าตามค่ามาตรฐานของ Web Browser ที่ได้เซ็ตไว้ จะไม่อนุญาตให้ส่งไฟล์ประเภท Binary ได้ เพราะติดในเครื่องความปลอดภัยของ Web Browser แต่ในทางปฏิบัติจริง ๆ สามารถทำได้ครับ เพราะก่อนหน้านี้ผมเคยใช้ร่วมกับ VBScript ในการแปลงไฟล์ให้เป็น Binary และส่งและก็รับได้จริง ๆ แต่ขั้นตอนการรับค่านั้นจะต้องรับเป็น Binary และนำ Binary Data ที่ได้ทำการสร้างไฟล์ แต่ข้อจำกัดคือสมารถรับได้ในปริมาณน้อย และใช้งาน memory เป็นอย่างมาก และจะต้องเปิด ActiveX (รองรับเฉพาะ IE) จึงไม่แนะนำวิธีนี้ แต่วิธีที่แนะนำใช้สำหรับการทดแทนคือการส่ง action และ target ไปยัง Iframe ซึ่งเป็นเทคนิคการส่งผลลัพธ์ไปยัง Iframe แต่ใช้การซ่อน Iframe ซึ่งเราจะดูเหมือนว่าเป็นการทำงานใน page เดิม ซึ่งอันที่จริงมีการส่งค่าไปยัง Iframe และประมวลผลในระบบปกติ ถ้ายังไม่เข้าใจลองอ่านบทความที่ผมทำเป็นลิ้งค์ให้ครับ รวมทั้งตัวอย่างนี้ยังทำเป็น Progress Icon เพื่อแสดงสถานะการทำงาน

บทความที่ควรอ่านเกี่ยวกับการส่งค่าแบบผ่าน Target ของ Iframe
Go to : PHP กับเทคนิคการ Submit Form แบบไม่เปลี่ยนหน้าโดยใช้ Target ไปยัง Iframe


ถ้ายังไม่เข้าใจลองมาดูตัวอย่าง

action ในระบบปกติ
<form name="frmMain" method="post" action="webpage.php" enctype="multipart/form-data">

</form>

จะเห็นว่ามีการ action="webpage.php" คือเมื่อกด submit ทุกอย่างจะไปยังหน้า webpage.php


action ในระบบ target="iframe"
<form action="webpage.php" name="frmMain" method="post" enctype="multipart/form-data" target="iframe_target">
<iframe id="iframe_target" name="iframe_target" src="#"></iframe>

</form>

จะเห็นว่าจะมีการ action="webpage.php" และ target="iframe_target" ความหมายก็คือให้ส่ง action ไปยัง webpage.php แต่แสดงผลใน iframe ที่ชื่อว่า iframe_target ซึ่งเมื่อใช้งานจริง ๆ เราจะไม่ต้องการให้เห็น iframe ซึ่งใช้ style="width:0;height:0;border:0px solid #fff;"

<iframe id="iframe_target" name="iframe_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>


หลังจากเราทำการ submit form ไปยัง iframe แล้วใน iframe ในกรณีที่ต้องการส่งผลลัพธ์กลับมายัง form หลัก ก็สามารถใช้ JavaScript ทำการ call function ใน form หลักได้เช่นเดียวกัน

Download progress.gif

window.top.window.functionMainForm();  // ใน iframe ทำการเรียก function ใน form หลัก


Example ตัวอย่างการทำ Form อัพโหลดด้วยเทคนิค target="iframe" (ทดแทนการใช้ Ajax)


UploadForm.php
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
</head>
<body>
	<form action="UploadSave.php" name="frmMain" method="post" enctype="multipart/form-data" target="iframe_target" onSubmit="return ChkSubmit();">
	<iframe id="iframe_target" name="iframe_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
	<script language="JavaScript">

		function ChkSubmit(result)
		{
			if(document.getElementById("filUpload").value == "")
			{
				alert('Please select file...');
				return false;
			}
			
			document.getElementById("progress").style.visibility="visible"; 
			document.getElementById("divresult").innerHTML ="Uploading....";
			return true;
		}

		function showResult(result)
		{
			document.getElementById("progress").style.visibility="hidden"; 
			if(result==1)
			{
				document.getElementById("divresult").innerHTML = "<font color=green> Save successfully! </font>  <br>";
			}
			else
			{
				document.getElementById("divresult").innerHTML = "<font color=red> Error!! Cannot upload data </font> <br>";
			}
		}
	</script>
	<div id="divresult"></div>
	<div id="progress" style="visibility:hidden"><img src="progress.gif"></div>
	<input type="file" name="filUpload" id="filUpload">
	  <input type="submit" name="submit" value="submit">
	  </form>
</body>
</html>


ใช้รูปภาพ <img src="progress.gif"> สำหรังแสดงสถานะการ Progress โดยใช้การซ่อนเอาไว้ และเมื่อคลิกอัพโหลดก็จะโชว์ Icon นี้ และหลังจากที่ทำงานสมบูรณ์ก็จะซ่อนอีกครั้ง จะได้ดูเหมือนว่ากำลังทำงานอัพโหลดอยู่ในขณะนั้น








UploadSave.php
<?php
sleep(3);

if(move_uploaded_file($_FILES["filUpload"]["tmp_name"],"myfile/".$_FILES["filUpload"]["name"]))
{
	echo "<script>alert('Upload file successfully!');</script>";
	echo "<script>window.top.window.showResult('1');</script>";
}
else
{
	echo "<script>alert('Error! Cannot upload data');</script>";
	echo "<script>window.top.window.showResult('2');</script>";
}
?>



Screehshot

Ajax Upload File

เมื่อการทำงานสามารถ Upload ได้สมบูรณ์

Ajax Upload File

เมื่อการทำงานไม่สามารถอัพโหลดได้

คำอธิบาย

จากตัวอย่างจะเห็นว่าจะมีการส่งค่าจาก UploadForm.php โดยผ่านการ action และ target ไปยัง Iframe และในไฟล์ UploadSave.php มีการเรียกใช้ functon ใน form หลัก โดยถ้าสมบูรณ์จะให้ทำการส่ง parameter (1) และถ้าผิดพลาดให้ส่ง parameter (2) เพื่อนำค่าที่ได้ทำงานในส่วนของ function showResult() ของ form หลัก

// sleep(3); เพื่อให้หยุด 3 นาที เพื่อให้รู้ว่ากำลัง Progress แต่ในการใช้งานจริง ๆ สามารถเอาออกได้


สำหรับเทคนิคอื่น ๆ แล้วในทางปฏิบัติการอัพโหลดไฟล์ Upload ไฟล์ ด้วย Ajax นั้นมีหลายวิธี ทั้งยังสามารถใช้ Flash Script เข้ามาจัดการ และทุกวันนี้ก็มี Framework หลายแห่งได้ออกแบบ Library สำหรับการอัพโหลดไฟล์ให้สามารถทำงานร่วมกับ Ajax ได้สะดวกและง่ายยิ่งขึ้น และง่ายต่อการนำไปใช้และถีบข้อจำกัดของการเขียนโปรแกรมผ่าน Web Browser มากขึ้น ซึ่งถ้ามีโอกาสในบทความต่อ ๆ ไปจะลองหา Framework ซะตัวมาให้ลองใช้งานกันดูครับ








บทความอื่น ๆ ที่เกี่ยวข้อง[u]
[u]Go to
: PHP กับเทคนิคการ Submit Form แบบไม่เปลี่ยนหน้าโดยใช้ Target ไปยัง Iframe
Go to : Ajax Tutorial : สอน Ajax เขียน Ajax เรียน Ajax สุดยอดการใช้งาน Ajax อย่างง่าย
Go to : jQuery Tutorial : สอน jQuery เขียน jQuery กับ JavaScript เรียน jQuery ในประเทศไทย
Go to : PHP สร้างฟอร์มสำหรับ Upload รูปภาพลงในฐานข้อมูล MySQL พร้อมกับแบบ Form สำหรับการแก้ไขรูปภาพ
Go to : PHP Upload VDO Clip and JW Player (PHP+MySQL)


   
Share
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2011-10-03
  Download : No files
Sponsored Links
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่