yii2 コンポーネントのマルチ画像アップロード プラグイン FileInput、yii2fileinput の詳細な使用法

yii2 コンポーネントのマルチ画像アップロード プラグイン FileInput、yii2fileinput の詳細な使用方法

著者: Bailang 出典: http://www.manks.top/yii2_multiply_images.html この記事の著作権は著者に属します転載は歓迎されますが、著者の同意がなければ、この声明は保持され、元のテキストへのリンクが記事ページのわかりやすい位置に提供されなければなりません。そうでない場合、当社は法的責任を追及する権利を留保します。

最も基本的な yii2 ファイルのアップロード、Youpaiyun への非同期アップロード、Baidu エディターの画像アップロードの問題など、ファイルのアップロードに関する記事をいくつか書きました。複数の画像のアップロードについて触れないと完璧ではないようです。

今日は、複数画像アップロード プラグインである FileInput を紹介します。なぜ TA をアップロード プラグインとして選択したかというと、第一に、この製品は Yii2 に似ていて使いやすいからです。追加するときの操作が簡単であるだけでなく、変更するときも、非同期でサイレントに直接画像を削除することもできます。最も注目すべき点は、インターフェース効果にブートストラップが組み込まれていることです。これは、すっきりしていて、簡潔で、美しく、快適です。

説明しやすいようにシーンを使ってみましょう

製品テーブルと製品画像テーブルがあるとします。製品画像テーブルには、製品 ID と画像アドレスのみが格納されているとします。
始める前の準備

1. 必要なコンポーネントをダウンロードします リーリー

2. 製品テーブルと製品画像テーブルを準備します。製品画像テーブルには製品 ID と画像 URL のみが含まれます。

複数の写真の同期アップロード

ここで言う同期操作とは、商品を追加する際に複数の写真を選択し、フォームと一緒に送信することです。使い方を見てみましょう。 リーリー

複数の写真をアップロードする場合は、写真を選択するときに必ず複数の写真を選択してください。

この方法では、画像を選択した後、直接フォームを送信するだけです。バックエンドのファイルアップロードプログラムをまだ実装していない場合は、ファイルアップロードの基本操作を参照してください。この記事を例として、製品に複数の写真を追加するとき、実際には 2 つのデータ テーブルを操作することに注意してください。

商品画像の非同期変更（削除、追加を含む）操作

冒頭でもわかるように、商品バナー画像については、フォーム送信と同時にアップロードします。 次に、商品編集時の商品画像の表示方法と、更新・追加方法について説明します。商品画像を削除しますか？ まず、コントローラー内の商品に対応するバナー画像を取得します。編集中の商品ページにバナー画像を表示する前に、少し処理します。 リーリー

ビューファイルViewのコードが参照可能です

リーリー

上記のように、FileInput コンポーネントの基本的なプロパティと設定をいくつかリストしました。必要に応じて、プロパティの詳細な説明についてドキュメントを確認してください。

[現在、ほとんどの国内ウェブサイトが非常に頻繁に記事を収集しており、原文の出典を示していないものさえあることを考慮すると、原作者は読者が問題を防ぐために原文を確認し、誤解を招くことを避けるためにすべての記事を更新しないことを望んでいます! ]

元のテキストを表示