บทความนี้แบ่งปันวิธีการอัปโหลดแบบอะซิงโครนัส Java สามวิธีสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
วิธีแรกในการอัปโหลดโดยใช้ปลั๊กอินเบราว์เซอร์ต้องใช้ทักษะการเข้ารหัสพื้นฐานที่แน่นอน ฉันจะไม่พูดถึงที่นี่เพื่อไม่ให้ลูก ๆ ของผู้คนเข้าใจผิด หากคุณคำนึงถึงสิ่งนี้คุณสามารถ Baidu ได้ด้วยตัวเอง
ประเภทที่สองใช้ iframe ที่ซ่อนอยู่เพื่อจำลองการอัปโหลดแบบอะซิงโครนัส ทำไมเราถึงพูดถึงการจำลองที่นี่? เพราะเราใส่ผลตอบแทนใน iframe ที่ซ่อนอยู่ดังนั้นเราจึงไม่ได้ทำให้หน้าปัจจุบันกระโดดซึ่งรู้สึกเหมือนการดำเนินการแบบอะซิงโครนัส
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> ที่ซ่อนอยู่ iframe อัปโหลดไฟล์ </title> <script type = "text/javascript" src = "path jQuery ... "> </script> </head> <body> enctype = "multipart/form-data" method = "post" target = "frm" onsubmit = "การโหลด (จริง);"> <p id = "upfile"> สิ่งที่แนบมา: <อินพุต type = "file" name = "myFile" style = "Internt: type = "subment" value = "อัพโหลดแบบอะซิงโครนัส"> <span id = "uptxt" style = "แสดง: ไม่มี"> การอัปโหลด ... </span> </p> </form> <div id = "flist" style = "1px dotgray; กำลังโหลด (เท็จ); } ฟังก์ชั่น addTofList (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<ปุ่ม onclick = 'delfile (/" " + fname +"/");'> ลบ </button>" $ ("#flist"). ผนวก (temp.join (""));} การโหลดฟังก์ชั่น (showloading) {ถ้า (showloading) {$ ("#uptxt") แสดง (); } else {$ ("#uptxt") ซ่อน; }} </script> </body> </html> มีสองประเด็นสำคัญในเทคโนโลยีนี้:
1. รูปแบบจะระบุเป้าหมายและผลลัพธ์ที่ส่งจะถูกส่งกลับไปยัง iframe ที่ซ่อนอยู่ (เช่นเป้าหมายแบบฟอร์มสอดคล้องกับแอตทริบิวต์ชื่อของ iframe)
2 หลังจากการส่งเสร็จสิ้นหน้าใน iframe สื่อสารกับหน้าหลัก จะแจ้งข้อมูลการอัปโหลดและข้อมูลไฟล์เซิร์ฟเวอร์สื่อสารกับหน้าหลักได้อย่างไร?
หลังจากได้รับไฟล์เราใช้ NodeJS เพื่อส่งคืนวิธีการที่กำหนดโดย window.parent หน้าหลัก หลังจากดำเนินการแล้วเราสามารถรู้ได้ว่าการอัปโหลดไฟล์เสร็จสมบูรณ์ รหัสนั้นง่ายมาก:
Router.post ('/upload2', multipartmiddleware, ฟังก์ชั่น (req, res) {var fpath = req.files.myfile.path; var fname = fpath.substr (fpath.aLastindexof ('//') + 1); settimeout "');", "</script>"]; หลังจากดำเนินการคุณสามารถเปิดตัวเลือกนักพัฒนาได้และคุณจะพบว่าข้อมูลบางอย่างที่ส่งคืนจาก iframe ที่ซ่อนอยู่จะถูกส่งคืน
ประเภทที่สามใช้ XMLHTTTPREQUEST2 สำหรับการอัปโหลดแบบอะซิงโครนัสจริง
หรือโพสต์รหัสก่อน:
หลังจากดำเนินการคุณสามารถเปิดตัวเลือกนักพัฒนาได้และคุณจะพบว่าข้อมูลบางอย่างที่ส่งคืนจาก iframe ที่ซ่อนอยู่จะถูกส่งคืน ประเภทที่สามใช้ XMLHTTTPREQUEST2 สำหรับการอัปโหลดแบบอะซิงโครนัสจริง มาโพสต์รหัสก่อน:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> xhr level2 asynchronous upload </title> <script type = "text/javaScript" src = "path jQuery ... style = "display: inline"> </p> <p id = "upbtn"> <อินพุต style = "padding-left: 50px; padding-right: 50px;" type = "button" value = "อัพโหลดแบบอะซิงโครนัส" onclick = "อัปโหลด;"> <span id = "uptxt" style = "แสดง: ไม่มี" การอัปโหลด ... </span> <span id = "upprog"> </span> <button id = "stopbtn" iddtn " Darkgray; "> </div> <script> การอัปโหลดฟังก์ชั่น {// 1. เตรียม formData var fd = new formData; fd.append ("myfile", $ ("#myfile") [0] .files [0]); // สร้างวัตถุ XHR var xhr = ใหม่ xmlhttprequest; // ฟังสถานะและตอบกลับแบบเรียลไทม์ // xhr และ xhr.upload มีเหตุการณ์ความคืบหน้า xhr.progress คือความคืบหน้าการดาวน์โหลด xhr.upload.progress คือความคืบหน้าการอัปโหลด xhr.upload.onprogress = ฟังก์ชั่น (เหตุการณ์) console.log ('%d%', เปอร์เซ็นต์); $ ("#upprog") ข้อความ (เปอร์เซ็นต์); - // การส่งสัญญาณเริ่มต้น xhr.onloadstart = ฟังก์ชั่น (เหตุการณ์) {console.log ('โหลดเริ่มต้น'); $ ("#upprog") ข้อความ ('เริ่มอัปโหลด'); $ ("#stopbtn") หนึ่ง ('คลิก', ฟังก์ชั่น {xhr.abort; $ (นี่) .hide ();}); โหลด (จริง); - // กระบวนการ AJAX เสร็จสิ้นเหตุการณ์ XHR.Onload = ฟังก์ชั่น (เหตุการณ์) {console.log ('โหลดสำเร็จ'); $ ("#upprog") ข้อความ ('อัปโหลดความสำเร็จ'); console.log (xhr.responsetext); var ret = json.parse (xhr.responsetext); addtoflist (ret.fname); - // เหตุการณ์ข้อผิดพลาดเกิดขึ้นในกระบวนการ AJAX XHR.Onerror = ฟังก์ชั่น (เหตุการณ์) {console.log ('ข้อผิดพลาด'); $ ("#upprog") ข้อความ ('เกิดข้อผิดพลาด'); - // ajax ถูกยกเลิก xhr.onabort = function (เหตุการณ์) {console.log ('abort'); $ ("#upprog") ข้อความ ('การดำเนินการถูกยกเลิก'); - // การส่งสัญญาณโหลดสิ้นสุดและจะถูกเรียกใช้โดยไม่คำนึงถึงความสำเร็จหรือความล้มเหลว xhr.onloadend = function (เหตุการณ์) {console.log ('โหลดสิ้นสุด'); กำลังโหลด (เท็จ); - // เริ่มคำขอ AJAX เพื่อส่งข้อมูล XHR.Open ('โพสต์', '/upload3', จริง); XHR.Send (FD); } ฟังก์ชั่น addTofList (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<ปุ่ม onclick = 'delfile (/" " + fname +"/");'> ลบ </button>" $ ("#flist"). ผนวก (temp.oin ("")); } ฟังก์ชั่น delfile (fname) {console.log ('เพื่อลบไฟล์:' + fname); // todo: โปรดใช้} ฟังก์ชันการโหลด (showloading) {ถ้า (showloading) {$ ("#uptxt") แสดง (); $ ("#stopbtn"). show (); } else {$ ("#uptxt"). ซ่อน (); $ ("#stopbtn"). ซ่อน (); }} </script> </body> </html> มีรหัสมากมาย แต่เข้าใจง่าย ทุกคนที่ใช้ Ajax รู้ว่าวัตถุ XHR ให้วิธีการโทรกลับ OnreadyStateChange เพื่อฟังกระบวนการร้องขอ/การตอบกลับทั้งหมด มีเหตุการณ์ความคืบหน้าอีกหลายเหตุการณ์ในข้อกำหนด XMLHTTTPRequest ระดับ 2 มี 6 เหตุการณ์ด้านล่าง:
1.LoadStart: ทริกเกอร์เมื่อได้รับข้อมูลการตอบกลับครั้งแรก
2. ความคืบหน้า: มันถูกกระตุ้นอย่างต่อเนื่องในระหว่างการรับการตอบสนอง
3.error: ทริกเกอร์เมื่อเกิดข้อผิดพลาดในคำขอ
4.Abort: ทริกเกอร์เมื่อการเชื่อมต่อถูกยกเลิกเนื่องจากการเรียกวิธีการยกเลิก
5. การโหลด: ทริกเกอร์เมื่อได้รับข้อมูลการตอบกลับแบบเต็ม
6. การโหลด: ทริกเกอร์หลังจากการสื่อสารเสร็จสิ้นหรือข้อผิดพลาดการยกเลิกเหตุการณ์โหลดจะถูกเรียกใช้
เวลานี้เราสามารถตีความรหัส: เมื่อเหตุการณ์การส่งเริ่มต้นเราเพิ่มเหตุการณ์คลิกที่ปุ่มส่งสัญญาณหยุดและวิธีการยกเลิกในตัวสามารถหยุดการส่งได้ หากคุณไม่คลิกมันจะถูกอัปโหลดตามปกติจนกว่าการส่งจะเสร็จสมบูรณ์ รหัสพื้นหลังของมันคล้ายกับวิธีที่สอง
ทั้งสามวิธีมีข้อได้เปรียบและข้อเสียของตัวเองให้สรุปง่ายๆ
การควบคุมของบุคคลที่สามมีการโต้ตอบและการควบคุมที่ดีเพราะพวกเขาอยู่ใกล้กับชั้นล่างและประสิทธิภาพของพวกเขาก็ยอดเยี่ยมเช่นกัน อย่างไรก็ตามเนื่องจากเป็นการยากที่จะเขียนคุณมักจะต้องติดตั้งปลั๊กอินด้วยตัวเองและบางครั้งคุณอาจต้องเขียนด้วยตัวเอง
โดยส่วนตัวแล้วฉันคิดว่าวิธีการ iframe ที่ซ่อนอยู่เป็นวิธีที่รอบคอบมาก Iframe สามารถช่วยเราทำสิ่งต่าง ๆ มากมาย วิธีการนี้มีความเข้ากันได้กับเบราว์เซอร์ที่กว้างขวางและไม่จำเป็นต้องติดตั้งปลั๊กอิน อย่างไรก็ตามมันมีการโต้ตอบที่ไม่ดีกระบวนการอัพโหลดที่ไม่สามารถควบคุมได้และประสิทธิภาพของมันก็มีค่าเฉลี่ยมาก
สำหรับการอัปโหลด Ajax Pure ระดับ Pure ต้องมีเบราว์เซอร์ที่มีรุ่นที่สูงกว่า (IE9+) แต่มันมีการโต้ตอบที่ดีมากคุณสามารถเห็นความคืบหน้าการอัปโหลดและสามารถควบคุมได้
การพัฒนาสามารถทำได้แตกต่างกันตามข้อกำหนด โดยส่วนตัวแล้วฉันคิดว่าการอัปโหลดไฟล์เหล่านี้โดยเฉพาะไฟล์ที่สองให้ความคิดซึ่งใช้ประโยชน์อย่างเต็มที่จากลักษณะของแท็ก HTML บางอย่างอาจเป็นสิ่งที่นักพัฒนาของเราต้องคิดเพิ่มเติม
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน