เมื่ออัปโหลดรูปภาพ ฉันพบว่ามีประโยชน์มากซึ่งรองรับการอัปโหลดรูปภาพหลายรูปพร้อมกัน คุณสามารถคลิกเพื่อเลือกรูปภาพ หรือจะลากรูปภาพไปที่กล่องอัปโหลดแล้วอัปโหลดโดยตรงก็ได้ สะดวก ใช้งานง่าย และอินเทอร์เฟซนั้นเรียบง่าย โดยพื้นฐานแล้ว คุณสามารถนำไปใช้ในโปรเจ็กต์ได้โดยตรง
มาดูสไตล์ของเขากันก่อน:
หลังจากเลือกรูปภาพแล้ว:
$(function(){ // เริ่มต้นปลั๊กอิน $(#demo).zyUpload({ width : 650px, // width height : 400px, // width itemWidth : 120px, // width of file item itemHeight : 100px, / / file ความสูงของ url ของรายการ: /upload/UploadAction, // เส้นทางของไฟล์ที่อัพโหลดหลายไฟล์: true, // ไม่ว่าจะสามารถอัพโหลดหลายไฟล์ได้หรือไม่ DragDrop: จริง // ไม่ว่าไฟล์จะสามารถลากและอัพโหลดได้หรือไม่ del : true, // ไม่ว่าจะเป็นไฟล์ที่สามารถลบได้ finishDel : false, // ไม่ว่าจะเป็นการลบตัวอย่างหลังจากการอัพโหลดไฟล์เสร็จสิ้น /* อินเทอร์เฟซการโทรกลับที่ได้รับจากภายนอก */ onSelect : function(files, allFiles ){ //วิธีการโทรกลับสำหรับการเลือกไฟล์ console.info(ไฟล์ต่อไปนี้ถูกเลือกอยู่:); console.info(files); console.info(ไฟล์ที่ไม่ได้อัปโหลดก่อน:); ไฟล์ทั้งหมด); }, onDelete: function(file, surplusFiles){ // วิธีการโทรกลับสำหรับการลบไฟล์ console.info (ไฟล์ที่ถูกลบในปัจจุบัน:); console.info (ไฟล์); console.info (ไฟล์ที่เหลืออยู่ในปัจจุบัน:); ; }, onSuccess: function(file){ // วิธีการโทรกลับสำหรับการอัพโหลดไฟล์ที่สำเร็จ console.info(ไฟล์นี้ถูกอัพโหลดสำเร็จ:); console.info(file); }, onFailure: function(file){ // วิธีการโทรกลับสำหรับการอัปโหลดไฟล์ที่ล้มเหลว console.info (การอัปโหลดไฟล์นี้ล้มเหลว:); console.info (ไฟล์); }, onComplete: function (responseInfo) { // วิธีการโทรกลับสำหรับการอัปโหลดเสร็จสิ้น console.info (การอัปโหลดไฟล์เสร็จสมบูรณ์) ; คอนโซล .info(responseInfo);แก้ไขการกำหนดค่าโดยตรงใน demo.js, url: /upload/UploadAction และดำเนินการอัปโหลดรูปภาพของคุณ การควบคุมนี้เป็นการประมวลผลเบื้องหน้าเท่านั้น คุณต้องเขียนการอัปโหลดในพื้นหลังด้วยตนเอง
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network