ホームページ >ウェブフロントエンド >jsチュートリアル >Expressとdropzonejsを使用してファイルアップロードフォームを構築する方法
Expressとdropzonejsを使用してファイルアップロードフォームを構築する方法
- Lisa Kudrowオリジナル
- 2025-02-10 09:42:11516ブラウズ
dropzone.js：ファイルアップロードフォームを改善するための強力なツール
ファイルアップロードフォームはしばしば面倒です。開発者は構築したくない、デザイナーは美化したくない、ユーザーは記入したくない。最もイライラするのは、ファイルコントロール自体です。スタイルを調整するのが難しく、使用は不器用で、ファイルのアップロードもフォームの送信を遅くすることができます。
dropzone.jsプラグインが存在するようになりました。これにより、ファイルのアップロードコントロールの外観とユーザーエクスペリエンスが改善され、Ajaxを介してバックグラウンドでファイルをアップロードでき、少なくともアップロードプロセスをより速く見せます。さらに、ファイルがサーバーに到着する前にファイルを検証し、ユーザーに近視のフィードバックを提供します。
この記事は、Dropzone.jsに飛び込み、それを実装する方法と、それを調整してカスタマイズする方法を示します。また、node.jsを使用して、シンプルなサーバー側のアップロードメカニズムを実装します。
コードはGitHubリポジトリにアップロードされました。
キーポイント
- dropzone.jsは、ドラッグアンドドロップを有効にし、インスタントファイル検証を提供し、ユーザーインターフェイスの美学を改善することにより、Expressのファイルアップロードフォームを強化します。
- dropzone.jsをセットアップするには、HTMLにJavaScriptファイルとCSSファイルを含め、最小または拡張スタイルでカスタマイズすることを選択できます。
- 基本的な構成では、アップロードにターゲットURLを設定する必要があります。また、HTTPメソッド、ファイルパラメーターと進行状況バー、サムネイル、その他のUI要素のその他のオプションが必要です。
- 高度な機能には、ファイルサイズの最大設定、ファイルタイプの制限、カスタムサムネイル、エラーメッセージが含まれます。
- dropzone.jsは、ファイルのアップロード、追加または削除、サムネイルの生成を成功させるためのイベント処理をサポートし、これらのイベントに基づいてさらにカスタマイズされます。
- Multer Middlewareを使用してファイルアップロードを処理してnode.jsとExpressとのサーバー側の統合を実現でき、Dropzone.jsとの互換性を確保するために追加のエラー処理と応答設定が追加されます。
dropzone.jsの紹介
dropzone.jsを使用すると、ユーザーはドラッグアンドドロップを使用してファイルをアップロードできます。そのユーザビリティの利点は合理的に議論することができますが、これはますます一般的なアプローチであり、多くの人々がデスクトップファイルを使用する方法と一致しています。また、メインブラウザでもよくサポートされています。
ただし、Dropzone.jsは単なるドラッグアンドドロップベースのウィジェット以上のものです。ウィジェットをクリックすると、より従来のファイルセレクターダイアログメソッドが起動します。
機能
dropzone.jsのいくつかの機能と機能は次のように要約されています。- は、jquery で使用できます
- ドラッグアンドドロップをサポート
- サムネイル画像を生成します
- 複数のアップロードをサポートすると、並行してアップロードすることを選択できます
- 進行状況bar
- が含まれています 完全なテーマフレンドリー
- 拡張可能なファイル検証サポートが含まれています
- はAMDモジュールとして使用できます。
- サイズは最小化後約43kbで、GZIP圧縮後約13kb
ブラウザサポート
公式ドキュメントによると、ブラウザは次のものをサポートしています。
- Chrome 7
- firefox 4
- ie 10
- Opera 12（APIの欠陥があるため、MacOSバージョン12は無効になっています）
- safari 6
設定
dropzone.jsを使用する最も簡単な方法は、CDNの最新バージョンを含めることです。これを書いている時点で、これはバージョン5.5.1です。または、プロジェクトのgitlabページから最新バージョンをダウンロードできます。 ReactJのサポートを提供するサードパーティパッケージもあります。
次に、ページにメインのJavaScriptファイルとCSSスタイルを含めることを確認してください。たとえば、
<code class="language-html"><!DOCTYPE html> <meta charset="UTF-8"> <title>File Upload Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css"> </code>プロジェクトは、2つのCSSファイルを提供していることに注意してください。いくつかの最小スタイルを備えたBasic.CSSファイルと、より広いDropzone.CSSファイルを提供しています。 dropzone.cssおよびdropzone.jsの最小化バージョンも利用できます。
（後続のコンテンツは元のテキストに似ていますが、言葉遣いと段落の構造は、擬似オリジナル効果を達成し、画像の位置を変えないように調整されます。スペースの制限のため、その後の擬似オリジナルコンテンツはここで省略します
以上がExpressとdropzonejsを使用してファイルアップロードフォームを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。