การ 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>
</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>
<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 หลักได้เช่นเดียวกัน
1.window.top.window.functionMainForm(); // ใน iframe ทำการเรียก function ใน form หลักDownload progress.gif
Example ตัวอย่างการทำ Form อัพโหลดด้วยเทคนิค target="iframe" (ทดแทนการใช้ Ajax)
UploadForm.php
01.<html>02.<head>03.<title>ThaiCreate.Com Tutorials</title>04.</head>05.<body>06.<form action="UploadSave.php" name="frmMain" method="post" enctype="multipart/form-data"target="iframe_target" onSubmit="return ChkSubmit();">07.<iframe id="iframe_target" name="iframe_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>08.<script language="JavaScript">09. 10.function ChkSubmit(result)11.{12.if(document.getElementById("filUpload").value == "")13.{14.alert('Please select file...');15.return false;16.}17. 18.document.getElementById("progress").style.visibility="visible";19.document.getElementById("divresult").innerHTML ="Uploading....";20.return true;21.}22. 23.function showResult(result)24.{25.document.getElementById("progress").style.visibility="hidden";26.if(result==1)27.{28.document.getElementById("divresult").innerHTML = "<font color=green> Save successfully! </font> <br>";29.}30.else31.{32.document.getElementById("divresult").innerHTML = "<font color=red> Error!! Cannot upload data </font> <br>";33.}34.}35.</script>36.<div id="divresult"></div>37.<div id="progress" style="visibility:hidden"><img src="progress.gif"></div>38.<input type="file" name="filUpload" id="filUpload">39.<input type="submit" name="submit" value="submit">40.</form>41.</body>42.</html>ใช้รูปภาพ <img src="progress.gif"> สำหรังแสดงสถานะการ Progress โดยใช้การซ่อนเอาไว้ และเมื่อคลิกอัพโหลดก็จะโชว์Icon นี้ และหลังจากที่ทำงานสมบูรณ์ก็จะซ่อนอีกครั้ง จะได้ดูเหมือนว่ากำลังทำงานอัพโหลดอยู่ในขณะนั้น
UploadSave.php
01.<?02.sleep(3);03. 04.if(move_uploaded_file($_FILES["filUpload"]["tmp_name"],"myfile/".$_FILES["filUpload"]["name"]))05.{06.echo "<script>alert('Upload file successfully!');</script>";07.echo "<script>window.top.window.showResult('1');</script>";08.}09.else10.{11.echo "<script>alert('Error! Cannot upload data');</script>";12.echo "<script>window.top.window.showResult('2');</script>";13.}14.?>Screehshot
เมื่อการทำงานสามารถ Upload ได้สมบูรณ์
เมื่อการทำงานไม่สามารถอัพโหลดได้
คำอธิบาย
จากตัวอย่างจะเห็นว่าจะมีการส่งค่าจาก UploadForm.php โดยผ่านการ action และ target ไปยัง Iframe และในไฟล์ UploadSave.php มีการเรียกใช้ functon ใน form หลัก โดยถ้าสมบูรณ์จะให้ทำการส่ง parameter (1) และถ้าผิดพลาดให้ส่ง parameter (2) เพื่อนำค่าที่ได้ทำงานในส่วนของ function showResult() ของ form หลัก
// sleep(3); เพื่อให้หยุด 3 นาที เพื่อให้รู้ว่ากำลัง Progress แต่ในการใช้งานจริง ๆ สามารถเอาออกได้
No comments:
Post a Comment