1. Pengajuan formulir
2. Flash
3. HTML5
Formulir Kirim Halaman Refresh, sulit untuk mengunggah asinkronisasi; Berdasarkan HTML5 tampaknya dibebankan, Anda dapat pergi ke situs web resmi untuk dilihat;
Efek Gambar 1:
Efek Gambar 2:
Karena unggahan lokal terlalu cepat, saya merekam gif 80m, dan akhirnya saya bisa melihat detail pengunggahan.
Karena kodenya lebih banyak:
Yang ini terutama berbicara tentang HTML dan CSS:
Kode HTML:
<! css type = text/css rel = stylesheet/> </ head> <body> <v id = unggahbox> <ul> <li> <img src = gambar/pic1.jpg/> <span class = progress> </span > <span class = persentase> </span> </li> <li> <img src = gambar/pic2.jpg/<span class = progress> </span> <span class = persentase> 12%</span > </li> <li class = done> <img src = gambar/pic2.jpg/> <span class = progress> </span> <span class = persentase> </span> </li> <div class = Clearfix> </div> </ul> </div> </body> </html>
Masih sangat sederhana:
A. One Div#Uneadbox, ul li mewakili setiap unit gambar unggahan
B. Li Img Gambar
C. Li Span. Progress digunakan untuk menampilkan kemajuan.
D. Li Span. Persentase digunakan untuk menampilkan angka 1%hingga 100%di tengah gambar.
CSS:
Body {#EEE;} #uploadbox {width: 622px Tinggi: 362px; ; Absolute; ; : -1000em;} #uploadbox li .progress {position: absolute;Semuanya sederhana, pada dasarnya penggunaan posisi sederhana ~ semua orang bisa melihatnya ~
Peta efek terakhir:
Di atas adalah semua isi artikel ini.