ドラッグアンドドロップで画像をアップロードする方法の詳細な紹介

この記事では、プラグインなしで画像のドラッグ アンド ドロップアップロードを実現する 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)

はじめに: フォームを送信するとページが更新されるため、非同期でアップロードすることが難しくなります。ほぼすべてのブラウザを考慮できるため、私はプロジェクトのアップロード ツールとして常に jQuery の Uploadify を使用しています。これも Html5 に基づいており、公式 Web サイトにアクセスして確認できます。もちろん、html5 は強力な API と File、FileReader、XMLHttpRequest などを提供します。この API を使用すると、ドラッグ アンド ドロップでアップロードできるようになります。

4.

JS HTML5 ドラッグアンドドロップアップロード画像プレビュー

はじめに: この記事では主に JS HTML5 ドラッグアンドドロップアップロード画像プレビューの関連情報を詳しく紹介します。これには特定の参照値があり、興味のある友人は

5を参照できます。

html5のドラッグアンドドロップ画像のアップロード例_html5チュートリアルのスキル

インターフェイスのスタイルについては、海外のフォトアルバムのWebサイトを参照しています。変更できません。鳥のさえずりを中国語に変換し、アップロード時のスタイルも変更しました。これを選択した理由は、画像を追加するのが簡単な 3 つの方法をサポートしているためです。とドロップ アップロード、もう 1 つは従来の選択 "width="400">

はじめに: ドラッグ アンド ドロップ アップロードで最も重要なことは、関数の 70% を実装するコードの js 部分です。残りの30%は、画像情報をバックグラウンドに送信し、圧縮やトリミングなどの対応する処理を行うだけです。興味のある友人は参考にしていただければ幸いです

[関連Q&A の推奨事項]:

javascript - 画像のドラッグ アンド ドロップのアップロードを実装するために js を要求する 実装のアイデア

以上がドラッグアンドドロップで画像をアップロードする方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。