1. การส่งแบบฟอร์ม
2. แฟลช
3. html5
ฟอร์มส่งหน้ารีเฟรชเป็นเรื่องยากที่จะอัปโหลดแบบอะซิงโครนัส; ดูเหมือนว่า HTML5 จะถูกเรียกเก็บเงินคุณสามารถไปที่เว็บไซต์อย่างเป็นทางการเพื่อดู;
เอฟเฟกต์รูปที่ 1:
รูปที่ 2:
เนื่องจากการอัปโหลดในท้องถิ่นนั้นเร็วเกินไปฉันบันทึก 80m GIF และในที่สุดฉันก็สามารถเห็นรายละเอียดของการอัปโหลดได้
เพราะรหัสมีมากขึ้น:
อันนี้ส่วนใหญ่พูดถึง HTML และ CSS:
รหัส HTML:
<! css type = text/css rel = stylesheet/> </head> <body> <div id = uploadbox> <ul> <li> <img src = images/pic1.jpg/> <span class = ความคืบหน้า> </span > <span class = เปอร์เซ็นต์> </span> </li> <li> <img src = images/pic2.jpg/> <span class = ความคืบหน้า> </span> <span class = เปอร์เซ็นต์> 12%</span > </li> <li class = เสร็จ> <img src = images/pic2.jpg/> <span class = ความคืบหน้า> </span> <span class = เปอร์เซ็นต์> </pan> </li> <div class = Clearfix> </div></ul> </div> </body> </html>
ยังง่ายมาก:
A. หนึ่ง div#updoadbox, ul li แสดงให้เห็นแต่ละหน่วยอัพโหลดภาพ
B. Li Img รูปภาพ
C. Span.progress ใช้เพื่อแสดงความคืบหน้า
D. li span.centage ใช้เพื่อแสดงตัวเลข 1%ถึง 100%ที่กึ่งกลางของภาพ
CSS:
ร่างกาย {พื้นหลัง: #eee;} #uploadbox {ความกว้าง: 622px; ; Absolute; ; : -1000em;} #uploadbox li. -progress {ตำแหน่ง: ความสูง;พวกเขาทั้งหมดเรียบง่ายโดยทั่วไปคือการใช้ตำแหน่งอย่างง่าย ๆ ~ ทุกคนสามารถมองเห็นได้ ~
แผนที่เอฟเฟกต์สุดท้าย:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้