HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグアンドドロップで画像をアップロード (1)-H5 チュートリアル-php.cn

HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグアンドドロップで画像をアップロード (1)

黄舟

リリース： 2017-03-09 16:36:12

オリジナル

2180 人が閲覧しました

HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグアンドドロップで画像をアップロードする (1):

アップロードは基本的にプロジェクトで頻繁に行われるものであり、通常は次を使用します:

1、フォーム送信

2、フラッシュ

3、html5

フォームを送信するとページが更新されるため、非同期でアップロードすることが困難になります。フラッシュはほぼすべてのブラウザーを考慮できるため、プロジェクトのアップロードツールとして常に jquery の uploadify を使用してきました。有料の html5 ベースのものもあります。公式 Web サイトにアクセスしてご覧ください。もちろん、html5 では API や File、FileReader、XMLHttpRequest などの強力な API が提供されており、これにより次のことが可能になります。アップロードするにはドラッグアンドドロップを使用します。

レンダリング 1:

レンダリング 2:

ローカルアップロードが速すぎるため、80M GIF を録画しました。ようやくアップロードの詳細な効果が確認できますね。まだ非常に良いですか? 悪くありません。CSDN のブログエディターもドラッグアンドドロップによるアップロードをサポートしているので、ファイルを探す手間が省けます。

コードが多いため:

この記事では主に HTML と CSS について説明します:

HTML コード:

<!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>

ログイン後にコピー

それでも非常に単純です:

a、内部の p#uploadBox ul li アップロードされた各画像ユニットを表します

b、li img image

c、li span.progress は、高さ 0% ～ 100% からの上昇水効果を伴う進行状況を表示するために使用されます:

d、li scan。パーセント画像の中央に 1% から 100% までの数字を表示するために使用されます。100% に達すると、正しい画像が表示されます。ポジショニングの使用 ~ご自身の目で確認してください~

最終的なレンダリング:

以上がHTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグアンドドロップで画像をアップロード (1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。