dropzone.js は、AJAX 非同期ファイル アップロード機能を提供し、ファイルのドラッグをサポートし、最大ファイル サイズをサポートし、ファイル タイプの設定をサポートし、アップロード結果のプレビューをサポートし、jQuery ライブラリに依存しないオープン ソースの JavaScript ライブラリです。
Dropzone
を使用して、正式なアップロードフォームを作成し、そのフォームに .dropzone クラスを与えることができます。
このようにして、Dropzone は .dropzone の form 要素を自動的に見つけ、ごく普通のファイル入力フォームを受け入れるのと同じように、action 属性を通じてそれをバックグラウンドのファイル受信プログラム (upload.php など) にアップロードします。 :
次に、upload.php にアップロード コードを記述します。Dropzone の公式 Web サイトでは、JS コードのみがダウンロードされ、バックグラウンド アップロード コードはダウンロードされません。ただし、helloweba.com では、PHP の完全なアップロード サンプル コードが提供されます。ソースコードをダウンロードしてください。
次のステップは、dropzone.js を導入することです。
その後は何もすることがなく、ブラウザを開いてドラッグ アンド ドロップのアップロード効果をテストするだけです。もちろん、スタイルを自分で記述することも、サンプル コードを参照することもできます。
別の状況があります。アップロードした HTML にフォームを含めたくないので、div#mydropzone を配置するだけで済みます
次に、js 呼び出しを設定します:
var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});
jquery を使用している場合は、jQuery バージョンを次のように呼び出すことができます:
$("#dropz").dropzone({ url: "upload.php" })
Web ページを実行すると、アップロードの効果が確認できます。
Dropzoneの設定
Dropzoneの特徴は非常に柔軟で、多くのオプションやイベントなどが提供されることです。以下は、Dropzone で一般的に使用されるいくつかの構成項目です。
url: ファイルがどのページに送信されるかを示す最も重要なパラメータ。
メソッド: デフォルトは post ですが、必要に応じて put に変更できます。
paramName:要素の name 属性に相当し、デフォルトは file です。
maxFilesize: 最大ファイル サイズ、単位は MB です。
maxFiles: デフォルトは null で、ファイルの最大数を制限する数値として指定できます。
addRemoveLinks: デフォルトは false。 true に設定すると、削除リンクがファイルに追加されます。
acceptedFiles: アップロードが許可されているファイルの種類を示します。形式はカンマ区切りの MIME タイプまたは拡張子です。例: image/*,application/pdf,.psd,.obj
uploadMultiple: Dropzone が一度に複数のファイルを送信できるかどうかを示します。デフォルトは false です。 true に設定すると、HTML フォームに複数の属性を追加するのと同じになります。
headers: 設定されている場合、追加のヘッダー情報としてサーバーに送信されます。例: {"custom-header": "value"}
init: Dropzone の初期化時に呼び出される関数で、独自のイベント リスナーを追加するために使用できます。
forceFallback: フォールバックは、ブラウザーがこのプラグインをサポートしていない場合に代替手段を提供するメカニズムです。デフォルトは false です。 true に設定すると、強制的にフォールバックします。
フォールバック: ブラウザがこのプラグインをサポートしていない場合に呼び出される関数。
上記は、編集者によって紹介されたファイルのドラッグ アンド ドロップ アップロードの Dropzone.js 実装です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。 。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。
ファイルのドラッグ アンド ドロップ アップロード機能を実装する Dropzone.js に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。