Home > Article > Web Front-end > Detailed introduction of HTML5+CSS3 to realize drag-and-drop upload of images without plug-in (supports preview and batch)

Detailed introduction of HTML5+CSS3 to realize drag-and-drop upload of images without plug-in (supports preview and batch)

黄舟Original: 2017-03-15 16:33:271556browse

This article mainly introduces HTML5+CSS3 to implement plug-in drag and dropUploading images (supports preview and batch), now html5 provides API and File, FileReader, XMLHttpRequest and other powerful APIs provide the possibility for us to drag and drop to upload. Those who are interested can find out.

Uploading is basically something that often occurs in projects, generally using:

1, formsubmission

2, flash

3, HTML5

form submission will refresh the page, making it difficult to upload asynchronously; flash may be used more because it can take into account almost all For browsers, I have always used jQuery's uploadify as the upload tool in the project. Uploadify is also based on Html5 and seems to be charged. You can go to the official website to take a look; of course , now html5 provides API and powerful APIs such as File, FileReader, XMLHttpRequest, etc., making it possible for us to drag and drop uploads.

Rendering 1:

Detailed introduction of HTML5+CSS3 to realize drag-and-drop upload of images without plug-in (supports preview and batch)

##Rendering 2:

Detailed introduction of HTML5+CSS3 to realize drag-and-drop upload of images without plug-in (supports preview and batch)

Because the local upload is too fast , I recorded an 80M gif, and I can finally see the detailed effect of the upload. Isn’t it still very good?

Due to a lot of code:

This piece 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>  
  
  
<p 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>  
  
        <p class="clearfix"></p>  
    </ul>  
  
</p>  
  
</body>  
</html>

It’s still very simple:

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

b, li img image

c, li span. progress is used to display progress, with the effect of rising water, from

height:0% -100%;

d, li span.percentage is used to display 1% to 100 in the center of the picture % number, when it reaches 100%, display a correct picture

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, basically a simple use of positioning ~Please take a look for yourself~

Final rendering:

Detailed introduction of HTML5+CSS3 to realize drag-and-drop upload of images without plug-in (supports preview and batch)

The above is the detailed content of Detailed introduction of HTML5+CSS3 to realize drag-and-drop upload of images without plug-in (supports preview and batch). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Briefly introduce the difference between HTML5 defer and asyncNext article：Briefly introduce the difference between HTML5 defer and async

See more

Detailed introduction of HTML5+CSS3 to realize drag-and-drop upload of images without plug-in (supports preview and batch)

Related articles