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

Yii2コン​​ポーネントのマルチ画像アップロードプラグインであるFileInput、yii2fileinputの詳細な使い方チュートリアル

最も基本的なyii2ファイルアップロード、Youpaiyunへの非同期アップロードなど、ファイルアップロードに関する記事を先に書きます。 Baidu 編集者の写真 アップロードの問題に関しては、複数の写真をアップロードするのが完璧ではないようです。

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

重要なポイントについて説明し、具体的な手順を見てみましょう

まず、コンポーネントをインストールします

コードをコピーします コードは次のとおりです:
作曲家にはkartik-v/yii2-widget-fileinput "@dev"が必要です

まず必要な説明をします: 製品テーブルと製品画像テーブルがあるとします。製品画像テーブルには製品 ID と画像アドレスのみが格納されます。

基本的な使い方を見る

リーリー

上記で複数の写真をアップロードするには、multiple=true を設定するだけです。写真を選択するときに必ず複数を選択してください。

この方法では、画像を選択した後、直接フォームを送信するだけです。ファイルアップロードプロセスをまだ実装していない場合は、ファイルアップロードの基本操作を参照してください。

複数の写真をアップロードする際の唯一の問題は、修正するときにどのように便利にするかということです。心配しないでください。FileInput が問題を解決してくれました。

編集中に画像がどのように表示されるか、および単一または複数の画像を非同期的に削除する方法を見てみましょう!

リーリー

上で述べたように、これらは基本的に FileInput コンポーネントの基本的なプロパティと設定です。ここでは一般的に使用されるプロパティのみをリストします。必要に応じて、プロパティの詳細な説明についてはドキュメントを確認してください。

上記の設定に従って、エフェクト画像をプレビューしてみましょう

実装するphpコードを書き始める前に、まずコントローラーにinitialPreviewとinitialPreviewConfigの設定を実装します

上記のビュー ファイルはユーザーが製品画像を表示する詳細ページであり、現在のコントローラーはビュー ファイルをレンダリングするコントローラーを参照していると仮定します。表示または削除および追加するには、コントローラー内の製品に関連付けられた画像を取得する必要があります。商品画像の

リーリー

p1 は画像アドレスのコレクションであり、initialPreview に割り当てるために使用されることがわかります

p2 は URL とキーのセットで、initialPreviewConfig に値を割り当てるためにここで使用されます

ここで、url は画像を削除するリクエストのアドレスです

keyは各画像に対応するIDです

この時点で、ビューファイルのpluginOptionsは次のようになります

リーリー

initialPreviewAsData を true に設定するように注意してください。そうしないと、画像の作成後にプレビュー画像が表示されません。

初期設定ファイルでuploadUrlを設定しました。このパラメータは、非同期アップロード用の画像アドレスです。

画像を選択すると、アップロード インターフェイスが表示され、上の図 2 に示すような効果が得られます。

各小さな写真のアップロードは、対応する小さな写真をアップロードすることです。入力ボックス (右下隅) のアップロードと削除は、1 枚の写真もアップロードされ、10 枚の写真もアップロードされます。ここでは、複数の画像をアップロードする操作について必要な説明のみを説明します。

画像のアップロードアドレスとアップロードに必要な追加パラメータ（プロダクトIDなど）を用意しました。詳細は、上記のビューファイルの設定を参照してください。

それでは/goods/async-imageの非同期アップロードのプログラム実装を見てみましょう

リーリー

この時点で、単一画像と複数画像のアップロード作業が完了しました。

写真を削除する効果を得るには、最初に2枚の写真をアップロードします。単一の画像または複数の画像をアップロードできます。

アップロードが成功したら、現在のページを更新できます。最初からコントローラーに画像プレビューを実装しているため、アップロードした 2 つの画像が表示されるはずです。

設定によれば、現在のプレビューは次のようになります。

ナンセンスはなしに、画像削除プログラム (/banner/delete) の実装を見てみましょう

リーリー

キーは、initialPreviewConfig 項目を構成するときに指定したキーであることに注意してください。非同期アップロードが成功した後は、コントローラー内のキーまたは p2 のキーを参照できます。

この時点で、yii2 でのマルチ画像アップロードのためのコンポーネントの使用法とプログラム コードの具体的な実装を示しました。

上記は、エディターが紹介した Yii2 コンポーネントのマルチ画像アップロード プラグイン FileInput の詳細な使用方法のチュートリアルの全体説明です。ご質問があれば、メッセージを残してください。編集者が時間内に返信します。また、Bangkejia ウェブサイトをサポートしてくださった皆様にも感謝いたします。