ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグ アンド ドロップで画像をアップロード (1)

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

黄舟
黄舟オリジナル
2017-03-09 16:36:122143ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。