HTML5/CSS3 classic case - drag and drop to upload images without plug-in (1)-H5 Tutorial-php.cn

HTML5/CSS3 classic case - drag and drop to upload images without plug-in (1)

黄舟

Release： 2017-03-09 16:36:12

Original

2136 people have browsed it

HTML5/CSS3 classic case - drag-and-drop upload of images without plug-ins (1):

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

1, form submission

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 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 paid. 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. provide the possibility for us to drag and drop to upload.

Rendering 1:

Rendering 2:

Since the local upload is too fast, I recorded an 80M gif. I can finally see the detailed effect of the upload. Isn’t it still very good? I suggest that CSDN’s blog editor also supports drag and drop upload, which saves me the trouble of looking for files. .

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>

Copy after login

It’s still very simple:

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

b, li img Picture

c, li span.progress is used to show the progress, with the effect of rising water, from height: 0% -100%;

d, li span.percentage is used in the picture Displays 1% to 100% numbers in the center, and when 100% is reached, displays a correct image

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;
}

Copy after login

They are all relatively simple, basically just simple use of positioning~ Take a look for yourself~

Final rendering:

The above is the detailed content of HTML5/CSS3 classic case - drag and drop to upload images without plug-in (1). For more information, please follow other related articles on the PHP Chinese website!