Heim > Artikel > Web-Frontend > Detaillierte Einführung in HTML5+CSS3 zur Realisierung des Drag-and-Drop-Uploads von Bildern ohne Plug-in (unterstützt Vorschau und Batch)

Detaillierte Einführung in HTML5+CSS3 zur Realisierung des Drag-and-Drop-Uploads von Bildern ohne Plug-in (unterstützt Vorschau und Batch)

黄舟Original: 2017-03-15 16:33:271602Durchsuche

In diesem Artikel wird hauptsächlich HTML5+CSS3 zum Implementieren des Plug-In-DragsHochladen Bilder vorgestellt (unterstützt Vorschau und Stapelverarbeitung), jetzt bietet HTML5 eine API und leistungsstarke APIs wie File, FileReader, XMLHttpRequest usw. bieten uns die Möglichkeit, das Hochladen per Drag-and-Drop durchzuführen. Wer Interesse hat, kann sich informieren.

Das Hochladen ist in Projekten grundsätzlich üblich:

1, fürm Einreichung

2. Flash

3. HTML5

Die Formularübermittlung erschwert das asynchrone Hochladen, da es fast alle Browser berücksichtigen kann Ich habe immer Uploady von jQuery als Upload-Tool im Projekt verwendet und scheint kostenpflichtig zu sein Schauen Sie, natürlich bietet HTML5 jetzt APIs und leistungsstarke APIs wie File, FileReader, XMLHttpRequest usw., die es uns ermöglichen, Uploads per Drag & Drop durchzuführen.

Rendering 1:

Detaillierte Einführung in HTML5+CSS3 zur Realisierung des Drag-and-Drop-Uploads von Bildern ohne Plug-in (unterstützt Vorschau und Batch)

Rendering 2:

Detaillierte Einführung in HTML5+CSS3 zur Realisierung des Drag-and-Drop-Uploads von Bildern ohne Plug-in (unterstützt Vorschau und Batch)

Da der lokale Upload zu schnell ist, habe ich Ich habe ein 80-Megapixel-GIF aufgenommen und kann endlich den detaillierten Effekt des Uploads sehen. Ist es nicht immer noch sehr gut?

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:

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

b. li img image

c . li span.progress wird verwendet, um den Fortschritt mit einem ansteigenden Wassereffekt von

Höhe:0 % -100 % anzuzeigen;

d, li span.percentage wird verwendet, um 1 % anzuzeigen in der Mitte des Bildes auf 100 % Zahl, wenn es 100 % erreicht, 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;  
}

sind relativ einfach , im Grunde einfache Verwendung der Positionierung ~ Schauen Sie selbst ~

Das endgültige Rendering:

Detaillierte Einführung in HTML5+CSS3 zur Realisierung des Drag-and-Drop-Uploads von Bildern ohne Plug-in (unterstützt Vorschau und Batch)

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML5+CSS3 zur Realisierung des Drag-and-Drop-Uploads von Bildern ohne Plug-in (unterstützt Vorschau und Batch). 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：Stellen Sie kurz den Unterschied zwischen HTML5-Defer und Async vorNächster Artikel：Stellen Sie kurz den Unterschied zwischen HTML5-Defer und Async vor

In Verbindung stehende Artikel

Mehr sehen