ホームページ >ウェブフロントエンド >jsチュートリアル >ドラッグアンドドロップで画像をアップロードする方法の詳細な紹介
ドラッグアンドドロップで画像をアップロードする方法の詳細な紹介
- 巴扎黑オリジナル
- 2017-06-12 14:09:022653ブラウズ
この記事では、プラグインなしで画像のドラッグ アンド ドロップアップロードを実現する HTML5+CSS3 を主に紹介します (プレビューとバッチをサポート)。HTML5 では、File、FileReader、XMLHttpRequest などの強力な API が提供されています。ドラッグアンドドロップで画像をアップロードすることが可能です。興味のある人は調べてみてください。アップロードは基本的にプロジェクトで頻繁に行われることです。 1. フォームの送信 2. flash3、HTML5 のフォームの送信はページを更新しますが、非同期でアップロードするのは難しいため、flash の方が使用される可能性があります。私はプロジェクトのアップロードツールとしてjQueryのuploadifyを常に使用してきましたが、これもHtml5に基づいており、公式Webサイトにアクセスして確認することができます。もちろん、html5では強力なAPIが提供されています。 File、FileReader、XMLHttpRequest などの関数。API を使用すると、ドラッグ アンド ドロップでアップロードできるようになります。レンダリング 1: レンダリング 2: ローカルのアップロードが速すぎるため、80M の GIF を記録しました。最終的に、アップロードの詳細な効果を確認できます
1 により、画像のドラッグ アンド ドロップ アップロードが可能になります。プラグインなし (サポートされています) プレビューとバッチの詳細な紹介
はじめに: この記事では主に、プラグインを使用しない画像のドラッグ アンド ドロップ アップロードを実装するための HTML5+CSS3 を紹介します (プレビューとバッチをサポート) ) html5 では、FileReader や XMLHttpRequest などの強力な API を使用してアップロードできるようになりました。興味のある人は調べてみてください。
2. HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグ アンド ドロップで画像をアップロードする (2)
はじめに: 前回の記事で、この全体の HTML と CSS を実装しました。プロジェクト: HTML5 CSS3 クラシックケース: プラグインなしでドラッグ アンド ドロップで画像をアップロード (プレビューとバッチをサポート) (1) このブログは前の記事を直接ベースにしています。 最終的な効果は次のとおりです: レンダリング 1: レンダリング 2: はい、お願いします。画像をアップロードさせてください 効果がわかるように 2 回投稿しました~ 画像 li の HTML は実際には非常に複雑であることがわかります。そのため、HTML ドキュメントにいくつかの変更を加えました:
3. HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグ アンド ドロップで画像をアップロードする (1)
4.
JS HTML5 ドラッグアンドドロップアップロード画像プレビュー
5を参照できます。
html5のドラッグアンドドロップ画像のアップロード例_html5チュートリアルのスキル
インターフェイスのスタイルについては、海外のフォトアルバムのWebサイトを参照しています。変更できません。鳥のさえずりを中国語に変換し、アップロード時のスタイルも変更しました。これを選択した理由は、画像を追加するのが簡単な 3 つの方法をサポートしているためです。とドロップ アップロード、もう 1 つは従来の選択 "width="400">
[関連Q&A の推奨事項]:
javascript - 画像のドラッグ アンド ドロップのアップロードを実装するために js を要求する 実装のアイデア
以上がドラッグアンドドロップで画像をアップロードする方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。