Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge of this article "HTML5+CSS3 how to achieve non-plug-in drag and upload picture function", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "HTML5+CSS3 how to achieve non-plug-in drag and upload picture function" article.

Uploading is a common occurrence in projects, and generally adopts:

1. Form submission

2 、 flash

3 、 HTML5

Form submission refreshes the page, so it is difficult to upload asynchronously. Flash may be used more often, because it can take into account almost all browsers. I always used jQuery's uploadify as the upload tool in the project. Uploadify is also based on Html5, which seems to be charged, so you can go to the official website to have a look. Of course, now html5 provides powerful API such as API and File,FileReader,XMLHttpRequest, which makes it possible for us to drag and drop to achieve upload.

Effect figure 1:

Effect figure 2:

As the local upload is too fast, recorded a 80m gif, you can finally see the details of the upload effect, is not very good.

Due to a lot of code:

This film is mainly about HTML and CSS:

HTML Code:

12%

It's still very simple:

A, a div#uploadBox, in which ul li represents each uploaded image unit

B, li img pictures

C, li span.progress is used to show the progress, there is a rising effect from height:0%-100%.

D, li span.percentage are used to display 1% to 100% numbers in the center of the picture, and to display a correct picture when it reaches 100%.

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. Width: 69px; height: 69px; position: absolute; left: 50%; top: 50%; margin-left:-34.5 px; margin-top:-34.5 px; text-align: center; font-size: 18px; line-height: 69px; color: # fff Border-radius: 34.5 px; background: rgba (0,0,0, .8);} # uploadBox li.done. Background: url ("images/done.png") no-repeat 00; text-indent:-1000em.progress {position: absolute; height: 22.4px; bottom: 0px; width: 200px; background: # 000 Opacity: .5;} .clearfix {clear: both;}

The final effect picture:

The above is about the content of this article on "how to achieve the function of dragging and uploading pictures without plug-ins in HTML5+CSS3". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.