FileUpload เป็นส่วนประกอบอัพโหลดไฟล์ขนาดใหญ่ที่เขียนด้วย JavaScript Pure Abroad ส่วนประกอบนี้รองรับฟังก์ชั่นเช่นการอัปโหลด Shard, Breakpoint Continuation และหลายไฟล์
นี่คือวิธีการใช้เทมเพลตที่กำหนดเอง FileUpload Upload (FinePloaderBasic):
ต่อไปนี้คือรหัสการกำหนดค่า:
การกำหนดค่าส่วนหน้า:
<!-ปุ่มนิยาม-> <div id = "basic_uploader_fine"> <i> </i> เลือกไฟล์ </div> <div id = "triggerUpload"> คลิกเพื่ออัปโหลด </div> <! id = "pauseupload"> ระงับการอัปโหลด </div> <div id = "uncessUpload"> อัปโหลดต่อ </div> <cliples> $ (เอกสาร). พร้อม (ฟังก์ชั่น () {$ fub = $ ('#basic_uploader_fine'); จริง, // ปุ่มอัปโหลดมัลติไฟล์: $ fub [0], // ปุ่มอัปโหลด autoupload: false, // ถ้าคุณไม่อัปโหลดโดยอัตโนมัติให้โทรใช้วิธีการอัปโหลด fileess เพื่ออัปโหลดด้วยตนเอง // ตรวจสอบการตรวจสอบไฟล์อัปโหลด: rededextensions: [jpeg ',' jpg ' ที่อยู่สัมบูรณ์) คำขอ: {endpoint: 'เซิร์ฟเวอร์/endpoint.php'}, retry: {enableauto: false // ค่าเริ่มต้นเป็นเท็จลองใหม่}, chunking: {เปิดใช้งาน: จริง, partyize: 500, // ขนาดกลุ่ม, ค่าเริ่มต้น "เซิร์ฟเวอร์/endpoint.php? เสร็จสิ้น" // การอัปโหลดกลุ่มเสร็จสิ้นหลังจากการประมวลผล}}, // การเรียกกลับฟังก์ชั่นการเรียกกลับ: {// ไฟล์เริ่มอัพโหลด onsubmit: ฟังก์ชั่น (id, filename) {$ message.append ('<div id = "file-' + id + ' ชื่อไฟล์) {$ ('#file-' + id) .addclass ('Alert-info') .html ('<img src = "ไคลเอนต์ /โหลด. gif">' + 'การเริ่มต้น' + '' ');}, // ความคืบหน้า '% ของ' + math.round (รวม/1024) + 'kb'; + 'อัปโหลดไฟล์ ... ' + ความคืบหน้า); ไฟล์ ...... ');}}, // หลังจากการอัปโหลดเสร็จสิ้น oncomplete: ฟังก์ชั่น (id, filename, responsejson) {ถ้า (responsejson.success) {var img = responsejson [' target '] $ ('#file- ' + id). ' +' อัพโหลดสำเร็จ! onerror: ฟังก์ชั่น (id, ชื่อ, เหตุผล, maybexhrorxdr) {console.log (id + '_' + ชื่อ + '_' + เหตุผล);},}}); $ ('#CancelUpload') คลิก (function () {uploader.cancel (0);}); $ ('#pauseupload') คลิก (ฟังก์ชั่น () {uploader.pauseupload (0);});รหัส PHP:
//handler.php เว็บไซต์อย่างเป็นทางการของไฟล์ต้องการ _once "handler.php"; $ uploader = new uploadHandler (); // ประเภทไฟล์ จำกัด $ uploader-> allededextensions = array (); // ขนาดไฟล์ขีด จำกัด $ uploader-> sizelimit = null; // อัปโหลดกล่องไฟล์ $ uploader-> inputName = "qqfile"; // กำหนดตำแหน่งที่เก็บไฟล์ของไฟล์ที่จัดกลุ่ม $ uploader-> chunksfolder = "chunks" รหัส handler.php และเพิ่มกฎการสร้างโฟลเดอร์ [คุณยังสามารถปรับแต่งได้]) $ uploadDirectory = $ uploader-> getPathName ('member_avatar'); ถ้า ($ method == "post") {header ("เนื้อหาประเภท: ข้อความ/plain"); // ผสานกลุ่มหลังจากการอัปโหลดกลุ่มเสร็จสมบูรณ์หาก (isset ($ _ get ["เสร็จสิ้น"]) {$ result = $ uploader-> combineChunks ($ uploadDirectory); // ผสานไฟล์ที่จัดกลุ่ม} else {// เริ่มอัปโหลดไฟล์ $ result = $ uploader-> handleupload ($ uploadDirectory); // รับชื่อที่อัปโหลด $ result ["uploadName"] = $ uploader-> getUploadName (); } echo json_encode ($ result);} // ลบการประมวลผลไฟล์อื่นถ้า ($ method == "ลบ") {$ result = $ uploader-> handleDelete ($ uploadDirectory); echo json_encode ($ result);} else {header ("http/1.0 405 ไม่อนุญาตให้ใช้วิธี");}ข้างต้นเป็นการกำหนดค่าเทมเพลตแบบกำหนดเองอย่างง่ายฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน