คำอธิบายโดยละเอียดเกี่ยวกับการใช้ปลั๊กอินอัพโหลดเว็บอัปโหลดเว็บ

ส่วนประกอบการอัปโหลดไฟล์ webploader สามารถใช้ประโยชน์จาก HTML5 ในเบราว์เซอร์ที่ทันสมัยอย่างเต็มที่ในขณะที่ไม่ละทิ้งเบราว์เซอร์ IE หลักโดยใช้ Runtime Flash ดั้งเดิมและเข้ากันได้กับ IE6+, iOS 6+, Android 4+ เวลาทำงานสองชุดวิธีการโทรเดียวกันสามารถเลือกได้โดยผู้ใช้ตามความประสงค์ การใช้การกระจายตัวของไฟล์ขนาดใหญ่การอัปโหลดพร้อมกันช่วยปรับปรุงประสิทธิภาพของการอัปโหลดไฟล์อย่างมาก

1. บทนำฟังก์ชั่น

การทำพร้อมกัน

การให้คำปรึกษาและการเกิดขึ้นพร้อมกันรวมกันเพื่อแบ่งไฟล์ขนาดใหญ่เป็นหลายบล็อกและอัปโหลดพร้อมกันปรับปรุงความเร็วในการอัปโหลดของไฟล์ขนาดใหญ่อย่างมาก

เมื่อปัญหาเครือข่ายทำให้เกิดข้อผิดพลาดในการส่งสัญญาณคุณจะต้องส่งข้อผิดพลาดให้ส่งสัญญาณทั้งหมดไม่ใช่ไฟล์ทั้งหมด นอกจากนี้การส่ง Shard สามารถติดตามความคืบหน้าการอัปโหลดได้มากขึ้นตามเวลาจริง

ดูตัวอย่างการบีบอัด

รองรับรูปแบบภาพทั่วไป JPG, JPEG, GIF, BMP, PNG Preview และการบีบอัดเพื่อบันทึกการส่งข้อมูลเครือข่าย

วิเคราะห์ข้อมูลเมตาใน JPEG และจัดการทิศทางที่หลากหลายอย่างถูกต้อง ในเวลาเดียวกันหลังจากการบีบอัดอัปโหลดและเก็บข้อมูลเมตาดั้งเดิมทั้งหมดของภาพ

เพิ่มไฟล์ผ่านหลายช่องทาง

รองรับการเลือกไฟล์หลายรายการการกรองประเภทลากและวาง (ไฟล์และโฟลเดอร์) และฟังก์ชั่นการวางรูปภาพ

ฟังก์ชั่นการวางส่วนใหญ่สะท้อนให้เห็นในความจริงที่ว่าเมื่อมีข้อมูลรูปภาพในคลิปบอร์ด (เครื่องมือภาพหน้าจอเช่น QQ (Ctrl + Alt + A) คลิกขวาที่ภาพในหน้าเว็บและคลิกคัดลอก), Ctrl + V สามารถเพิ่มไฟล์ภาพนี้ได้

HTML5 & Flash

เข้ากันได้กับเบราว์เซอร์กระแสหลักอินเทอร์เฟซที่สอดคล้องกันและใช้การสนับสนุนรันไทม์สองชุดดังนั้นผู้ใช้ไม่จำเป็นต้องใส่ใจเกี่ยวกับสิ่งที่ใช้ในการใช้เมล็ดภายใน

ในเวลาเดียวกันชิ้นส่วนแฟลชไม่ได้ทำงานที่เกี่ยวข้องกับ UI ซึ่งสะดวกสำหรับผู้ใช้ที่ไม่สนใจการขยายตัวของ Flash และความต้องการทางธุรกิจที่กำหนดเอง

MD5 วินาทีผ่าน

เมื่อขนาดไฟล์มีขนาดใหญ่และปริมาณมีขนาดค่อนข้างใหญ่จะรองรับการตรวจสอบค่า MD5 ของไฟล์ก่อนที่จะอัปโหลด หากสอดคล้องกันคุณสามารถข้ามไปได้โดยตรง

หากเซิร์ฟเวอร์และส่วนหน้าปรับเปลี่ยนอัลกอริทึมอย่างสม่ำเสมอและใช้เซ็กเมนต์ MD5 มันสามารถปรับปรุงประสิทธิภาพการตรวจสอบได้อย่างมากและใช้เวลาประมาณ 20ms

ง่ายต่อการขยายและถอดออกได้

กลไกที่ถอดออกได้ถูกนำมาใช้เพื่อแยกฟังก์ชั่นออกเป็นวิดเจ็ตและสามารถจับคู่ได้อย่างอิสระ

รหัสถูกจัดระเบียบโดยใช้ข้อกำหนด AMD ซึ่งชัดเจนและชัดเจนทำให้สะดวกสำหรับผู้เล่นขั้นสูงที่จะขยาย

แนะนำทรัพยากร

การอัปโหลดไฟล์โดยใช้ Web Uploader ต้องมีการแนะนำสามทรัพยากร: JS, CSS และ SWF

 <!-แนะนำ css-> <link rel = "stylesheet" type = "text/css" href = "โฟลเดอร์ webuploader/webploader.css"> <!-แนะนำ js-> <script type = "text/javaScript แสดงในภายหลัง->

2. การอัปโหลดไฟล์

WebPloader มีการใช้งานการอัปโหลดไฟล์พื้นฐานเท่านั้นและไม่รวมส่วน UI ดังนั้นคุณสามารถเล่นแง่มุมแบบโต้ตอบได้อย่างอิสระ ต่อไปนี้จะแสดงให้เห็นถึงวิธีการใช้เวอร์ชันง่าย ๆ

ส่วน HTML

ขั้นแรกเตรียมโครงสร้าง DOM รวมถึงสามส่วน: คอนเทนเนอร์ที่เก็บข้อมูลไฟล์ปุ่มการเลือกและปุ่มอัปโหลด

 <div id = "uploader"> <!-ใช้ในการจัดเก็บข้อมูลไฟล์-> <div id = "thelist"> </div> <div> <div id = "picker"> เลือกไฟล์ </div> <button id = "ctlbtn"> เริ่มอัปโหลด </pution> </div> </div>

เริ่มต้นเว็บอัปโหลดเว็บ

สำหรับรายละเอียดโปรดดูที่ส่วนความคิดเห็นในรหัส

 var uploader = webPloader.create ({// swf ไฟล์พา ธ SWF: base_url + '/js/uploader.swf', // เซิร์ฟเวอร์การรับไฟล์เซิร์ฟเวอร์: 'http://webupuploader.duapp.com/server/fileupload.php' แฟลช

แสดงการเลือกผู้ใช้

เนื่องจาก WebPloader ไม่ได้จัดการกับตรรกะ UI จึงจำเป็นต้องฟังเหตุการณ์ Filequeued เพื่อนำไปใช้

 // เมื่อมีการเพิ่มไฟล์ลงในคิวอัปโหลด on ('filequeued' ฟังก์ชัน (ไฟล์) {$ list.append ('<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> รอการอัปโหลด ... </p>' + '

ความคืบหน้าการอัปโหลดไฟล์

เมื่ออัปโหลดไฟล์เว็บอัปโหลดจะส่งเหตุการณ์ UploadProgress ซึ่งมีวัตถุไฟล์และความคืบหน้าการอัปโหลดปัจจุบันของไฟล์

 // สร้างแถบความคืบหน้าเพื่อแสดงแบบเรียลไทม์ระหว่างการอัปโหลดไฟล์ uploader.on ('uploadprogress', ฟังก์ชั่น (ไฟล์, เปอร์เซ็นต์) {var $ li = $ ('#' + file.id), $ เปอร์เซ็นต์ = $ li.find ('. ความคืบหน้า. progress-bar'); // หลีกเลี่ยงการสร้างซ้ำของ if (! $ เปอร์เซ็นต์ '</div>'). ภาคผนวก ($ li) .find ('. progress-bar');

ความสำเร็จของไฟล์และการประมวลผลความล้มเหลว

หากการอัปโหลดไฟล์ล้มเหลวเหตุการณ์ UploadError จะถูกส่งและหากอัปโหลดไฟล์สำเร็จเหตุการณ์ UploadSuccess จะถูกส่ง โดยไม่คำนึงถึงความสำเร็จหรือความล้มเหลวเหตุการณ์ uploadcomplete จะถูกเรียกใช้หลังจากอัปโหลดไฟล์

 uploader.on ('uploadsuccess', ฟังก์ชั่น (ไฟล์) {$ ('#'+file.id) .find ('p.state') ข้อความ ('อัปโหลด');}); uploader.on ('uploaderror', ฟังก์ชั่น (ไฟล์) 'uploadcomplete', ฟังก์ชั่น (ไฟล์) {$ ('#'+file.id) .find ('. ความคืบหน้า'). fadeout ();});

3. อัปโหลดรูปภาพ

เมื่อเปรียบเทียบกับการอัพโหลดไฟล์ธรรมดาการสาธิตนี้แสดงให้เห็นว่า: การกรองไฟล์, ตัวอย่างภาพการอัพโหลดการบีบอัดภาพและฟังก์ชั่นอื่น ๆ

HTML

ในการใช้การสาธิตดังกล่าวข้างต้นคุณต้องเตรียมปุ่มและคอนเทนเนอร์เพื่อจัดเก็บรายการข้อมูลไฟล์ที่เพิ่มเข้ามา

 <!-ส่วนโครงสร้าง DOM-> <div id = "uploader-demo"> <!-ใช้ในการจัดเก็บรายการ-> <div id = "filelist"> </div> <div id = "filePicker"> เลือกรูปภาพ </div> </div>

จาวาสคริปต์

สร้างอินสแตนซ์ของเว็บอัปโหลด

 // เริ่มต้น Web UploaderVar Uploader = WebPloader.Create ({// ว่าจะอัปโหลดโดยอัตโนมัติหลังจากเลือกไฟล์ Auto: จริง, // พา ธ ไฟล์ SWF SWF: BASE_URL + '/JS/UPLOADER.SWF' เลือกปุ่มไฟล์

ฟังเหตุการณ์ Filequeued และสร้างภาพตัวอย่างผ่าน Uploader.makethumb

PS: สิ่งที่คุณได้รับที่นี่คือข้อมูล URL ข้อมูลและ IE6 และ IE7 ไม่สนับสนุนตัวอย่างโดยตรง สามารถดูตัวอย่างได้ด้วยแฟลชหรือเซิร์ฟเวอร์

 // เมื่อมีการเพิ่มไฟล์, uploader.on ('filequeued', ฟังก์ชั่น (ไฟล์) {var $ li = $ ('<div id = "' + file.id + '">' + '<img>' + '<div>' + file.name + '</div>' + '</div>') ); src);

จากนั้นส่วนที่เหลือคือพรอมต์สถานะการอัปโหลด เมื่ออัปโหลดกระบวนการอัปโหลดไฟล์การอัปโหลดจะสำเร็จการอัปโหลดล้มเหลวและการอัปโหลดเสร็จสมบูรณ์การอัปโหลดโปรแกรมอัพโหลด UploadSuccess, UploadError และ uploadcomplete ตามลำดับที่สอดคล้องกับกิจกรรม uploadProgress, UploadSuccess, UploadError

 // สร้างแถบความคืบหน้าเพื่อแสดงแบบเรียลไทม์ระหว่างการอัปโหลดไฟล์ uploader.on ('uploadprogress', ฟังก์ชั่น (ไฟล์, เปอร์เซ็นต์) {var $ li = $ ('#'+file.id), $ เปอร์เซ็นต์ = $ li.find ('ความคืบหน้าช่วง'); // หลีกเลี่ยงการสร้างซ้ำถ้า ($ เปอร์เซ็นต์ความยาว) {$ เปอร์เซ็นต์ = $ ('<p> <p> $ เปอร์เซ็นต์.css ('ความกว้าง', เปอร์เซ็นต์ * 100 + '%');}); // ไฟล์ถูกอัปโหลดสำเร็จเพิ่มคลาสที่ประสบความสำเร็จในรายการและทำเครื่องหมายการอัปโหลดด้วยสไตล์ uploader.on ('uploadsuccess', ฟังก์ชั่น (ไฟล์) {$ ('#'+file.id) .addclass ('upload-state-done');}); // การอัปโหลดไฟล์ล้มเหลวและมีข้อผิดพลาดในการอัปโหลด uploader.on ('uploaderRor', ฟังก์ชั่น (ไฟล์) {var $ li = $ ('#'+file.id), $ error = $ li.find ('div.error'); // หลีกเลี่ยงการสร้างซ้ำถ้า (! เสร็จสิ้นแล้วจะประสบความสำเร็จหรือล้มเหลวลบแถบความคืบหน้าก่อน uploader.on ('uploadcomplete', ฟังก์ชั่น (ไฟล์) {$ ('#'+file.id) .find ('. ความคืบหน้า'). ลบ ();});

ด้านบนเป็นคำแนะนำเกี่ยวกับวิธีการใช้ปลั๊กอินอัปโหลดไฟล์เว็บอัปโหลด ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน