HTML5 CSS3 Classic case: No plugin drag upload image (Support preview and Batch) (i)

Uploading is basically a recurring item in a project, usually using:

1. Form submission

2. Flash

3, HTML5

Form submission will refresh the page, it is difficult to do asynchronous upload, flash may be used more, because it can take into account almost all browsers, I have been using jquery uploadify as a project upload tool, Uploadify also based on HTML5 seems to be charged , you can go to the official website to see, of course, now HTML5 provides the API and File,filereader,xmlhttprequest and other powerful API, for us to drag and drop implementation of the upload provides the possibility.

1:

2:

Because the local upload is too fast, recorded a 80M gif, finally can see the details of the upload effect, is still very good, suggest CSDN Blog editor also support drag-and-drop upload, save me to find files.

Because the code is much more:

This is mainly about HTML and CSS:

HTML code:

<! DOCTYPE html>
is still very concise:
A, a div#uploadbox, Inside ul Li represents each upload picture unit
B, Li img Pictures
C, Li Span.progress used to show progress, a kind of water rise effect, from height:0%-100%;
D, Li Span.percentage is used to display 1% to 100% numbers in the center of the picture, and when the 100% is reached, a correct picture is displayed.

Css:
body{background: #eee;}    #uploadBox {width:622px;    height:362px;    Background-color: #fff;    border:1px solid #777; margin:120px Auto;}    #uploadBox ul li{Float:left;    position:relative;    margin-left:5px; margin-top:5px;}    #uploadBox Li img{border:1px solid #D1D1D1;    width:198px;    height: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;    width:200px;    Background: #000; Opacity:. 5;}. clearfix{Clear:both;}

Are relatively simple, basic is the simple use of positioning ~ everyone to see the next ~
At last:


Welcome to leave a message ~ If you have any ideas, or good case ~