1. FORM submission
2. Flash
3. HTML5
Form submits a refresh page, it is difficult to upload asynchronous; Flash may be used more, because it can take into account almost all the browsers. I have always used JQuery's UPLOADIFY as the uploading tool in the project. UPLOADIFY also has a based on based on HTML5 seems to be charged, you can go to the official website to see; of course, now HTML5 provides powerful APIs such as API and File, FileRereader, XMLHTTPREQUEST, etc., which provides us with possible drag and drop implementation.
Effect figure 1:
Effect Figure 2:
Because the local upload is too fast, I recorded a 80m GIF, and finally I can see the details of the uploading. Is it still very good?
Because the code is more:
This one mainly talks about HTML and CSS:
HTML code:
<! Doctype html> <html> <head> <Title> </Title> <meta charset = UTF-8/> <link href = reset.css type = text/css rel = styleSheet/> <link href = 01. css type=text/css rel=stylesheet/> </head> <body> <div id=uploadBox> <ul> <li> <img src=images/pic1.jpg/> <span class=progress></span > <span class = percentage> </span> </li> <li> <IMG SRC = Images/Pic2.jpg/> <span class = Progress> </span> <span class = percentage> 12%</span > </li> <li class = Done> <IMG SRC = Images/Pic2.jpg/> <span class = Progress> </span> <span class = percentage> </span> </li> <div class = Clearfix> </DIV> </Ul> </DIV> </Body> </html>
Still very simple:
A. One div#uploadBox, UL Li represents each upload image unit
B. Li IMG Picture
C. Li Span.progress is used to display progress. It has the effect of rising water. From Height: 0% -100%;
D. Li span.percentage is used to display 1%to 100%numbers in the center of the picture. When it reaches 100%, a correct picture is displayed
CSS:
Body {background: #eee;} #UploadBox {width: 622px; height: 362px; background-color: #fff; 1px solid #777; } #Uploadbox ul li {float: left; posity: Relative; Margin-heft: 5px; Margin-Top: 5px;} #uploadbox li img {border: 1px solid #d1d1d1; width: 198px; 112px; vertical-align: middle. ;} #Uploadbox Li. Percentage {width: 69px; Height: 69px; Position: AbSolute; left: 50%; TOP: 50%; Margin-Left: -34.5px; margin-top: -34.5px; text-align: center; font-siZe: 18px; Line- Height: 69px; COLOR: #fff; Border-Radius: 34.5px; Background: RGBA (0, 0, 0, .8);} #UploadBox li.done. Percentage {Background: URL (Images /done.png) NO -Repeat 0 0; text -indent: -1000em;} #uploadbox li .progress {position: absolute; height: 22.4px; bottom: 0px; 100px; background: #000 ; Opacity: .5;} .Clearfix { Clear: Both;}They are all simple, basically the simple use of positioning ~ Everyone can see it ~
Last effect map:
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.