Dropzone.jsはファイルのドラッグ＆ドロップアップロード機能を実装します

dropzone.js は、AJAX 非同期ファイル アップロード機能を提供し、ファイルのドラッグをサポートし、最大ファイル サイズをサポートし、ファイル タイプの設定をサポートし、アップロード結果のプレビューをサポートし、jQuery ライブラリに依存しないオープン ソースの JavaScript ライブラリです。

Dropzone

を使用して、正式なアップロードフォームを作成し、そのフォームに .dropzone クラスを与えることができます。

<form id="mydropzone" action="/upload.php" class="dropzone"></form>

このようにして、Dropzone は .dropzone の form 要素を自動的に見つけ、ごく普通のファイル入力フォームを受け入れるのと同じように、action 属性を通じてそれをバックグラウンドのファイル受信プログラム (upload.php など) にアップロードします。 :

<input type="file" name="file" />

次に、upload.php にアップロード コードを記述します。Dropzone の公式 Web サイトでは、JS コードのみがダウンロードされ、バックグラウンド アップロード コードはダウンロードされません。ただし、helloweba.com では、PHP の完全なアップロード サンプル コードが提供されます。ソースコードをダウンロードしてください。

次のステップは、dropzone.js を導入することです。

<script src="dropzone.min.js"></script>

その後は何もすることがなく、ブラウザを開いてドラッグ アンド ドロップのアップロード効果をテストするだけです。もちろん、スタイルを自分で記述することも、サンプル コードを参照することもできます。

別の状況があります。アップロードした HTML にフォームを含めたくないので、div#mydropzone を配置するだけで済みます

<div id="mydropzone" class="dropzone"></div>

次に、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 サイトに注目してください。