ホームページ > 記事 > ウェブフロントエンド > HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグ アンド ドロップで画像をアップロード (1)
HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグ アンド ドロップで画像をアップロード (1)
- 黄舟オリジナル
- 2017-03-09 16:36:122115ブラウズ
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 サイトの他の関連記事を参照してください。