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

高洛峰
リリース: 2017-01-12 16:48:54
オリジナル
3593 人が閲覧しました

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!