แนะนำทรัพยากร
การอัปโหลดไฟล์โดยใช้ Web Uploader ต้องมีการแนะนำสามทรัพยากร: JS, CSS และ SWF
<!-แนะนำ css-> <link rel = "stylesheet" type = "text/css" href = "โฟลเดอร์ webuploader/webploader.css"> <!-แนะนำ js-> <script type = "text/javaScript แสดงในภายหลัง->
การอัปโหลดไฟล์
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', ฟังก์ชั่น (ไฟล์) {$ ('#'+file.id) .find ('P.State') ข้อความ ('การอัปโหลดข้อผิดพลาด');}); uploader.on ('uploadcomplete', ฟังก์ชั่น (ไฟล์) {$ ('#'+file.id) .find ('. ความคืบหน้า'). fadeout ();}); uploader.on ('uploadcomplete', ฟังก์ชั่น (ไฟล์) {$ ('#'+file.id) .find ('. ความคืบหน้า'). fadeout ();});อัพโหลดรูปภาพ
เมื่อเปรียบเทียบกับการอัพโหลดไฟล์ธรรมดาการสาธิตนี้แสดงให้เห็นว่า: การกรองไฟล์, ตัวอย่างภาพการอัพโหลดการบีบอัดภาพและฟังก์ชั่นอื่น ๆ
HTML
ในการใช้การสาธิตดังกล่าวข้างต้นคุณต้องเตรียมปุ่มและคอนเทนเนอร์เพื่อจัดเก็บรายการข้อมูลไฟล์ที่เพิ่มเข้ามา
<!-ส่วนโครงสร้าง DOM-> <div id = "uploader-demo"> <!-ใช้ในการจัดเก็บรายการ-> <div id = "filelist"> </div> <div id = "filePicker"> เลือกรูปภาพ </div> </div>
จาวาสคริปต์
สร้างอินสแตนซ์ของเว็บอัปโหลด
// เริ่มต้นเว็บอัปโหลด var 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> .find ('span');} $ เปอร์เซ็นต์ 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 ('. ความคืบหน้า'). ลบ ();});ข้างต้นเป็นความรู้ที่เกี่ยวข้องที่แนะนำให้คุณโดยใช้ Web Uploader เพื่อให้ได้การอัปโหลดแบบหลายไฟล์ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!