Heim > Artikel > Web-Frontend > Klassischer HTML5/CSS3-Fall – Bilder per Drag & Drop ohne Plug-in hochladen (1)

Klassischer HTML5/CSS3-Fall – Bilder per Drag & Drop ohne Plug-in hochladen (1)

黄舟Original: 2017-03-09 16:36:122118Durchsuche

Klassischer HTML5/CSS3-Fall – Bilder per Drag & Drop ohne Plug-Ins hochladen (1):

Das Hochladen ist im Grunde das, was in Projekten häufig vorkommt und im Allgemeinen verwendet wird:

1. Formularübermittlung

3. HTML5

Die Formularübermittlung erschwert das asynchrone Hochladen; Flash kann häufiger verwendet werden. Da es fast alle Browser berücksichtigen kann, habe ich im Projekt immer Uploadify als Upload-Tool verwendet, das ebenfalls auf HTML5 basiert und anscheinend kostenpflichtig ist Schauen Sie sich das an. Natürlich bietet HTML5 jetzt eine API und leistungsstarke APIs wie File, FileReader, XMLHttpRequest usw. bieten uns die Möglichkeit, per Drag & Drop hochzuladen.

Rendering 1:

Rendering 2:

Seit dem Der lokale Upload ist zu schnell, ich kann endlich die Details des Uploads sehen. Ich schlage vor, dass der Blog-Editor von CSDN auch den Drag-and-Drop-Upload unterstützt, was mir die Mühe des Suchens erspart für Dateien.

Wegen viel Code:

In diesem Abschnitt geht es hauptsächlich um HTML und 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>

Es ist immer noch ganz einfach:

a. Eine p#uploadBox, in der ul li jede hochgeladene Bildeinheit darstellt

b. li img picture

c, li span.progress wird verwendet, um den Fortschritt mit dem Effekt von steigendem Wasser aus der Höhe anzuzeigen:

d, li span. Prozentsatz wird verwendet. Zeigt Zahlen von 1 % bis 100 % in der Bildmitte an. Wenn 100 % erreicht sind, wird ein korrektes Bild angezeigt.

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

Sie sind alle relativ einfach, im Grunde nur eine einfache Anwendung der Positionierung~ Schauen Sie selbst nach~

Das endgültige Rendering:

Das obige ist der detaillierte Inhalt vonKlassischer HTML5/CSS3-Fall – Bilder per Drag & Drop ohne Plug-in hochladen (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Exquisites HTML5-CSS3-Gehäuse – Details zur Realisierung einer personalisierten Diashow auf einer VCD-VerpackungsboxNächster Artikel：Exquisites HTML5-CSS3-Gehäuse – Details zur Realisierung einer personalisierten Diashow auf einer VCD-Verpackungsbox

In Verbindung stehende Artikel

Mehr sehen