この記事では主に yii2 マルチイメージアップロードコンポーネントの使用に関するチュートリアルを紹介します。使用時に注意すべき点が多数ありますので、必要な方は Script Home プラットフォームで共有してください。
最近、yii2 を使用してフォーム ページを開発していたときに、複数の画像をアップロードする必要があり、この領域のコンポーネントを検索したところ、基本的に Amway fileInput コンポーネントを見つけたので、使用してみました。このライブラリを使用して、バックエンド フォーム ページを完成させます。使っていくうちに、まだまだ細かい点で注意すべき点がたくさんあることがわかったので、使用過程を記録してみました。
yii2-widget-fileinput このライブラリの github アドレスはここにあります。インストール部分はドキュメントに従うだけです。
公式ドキュメントに示されているいくつかの一般的な操作を見てみましょう:
use kartik\widgets\FileInput // or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation // 使用ActiveForm 和 model绑定的单张图片示例 echo $form->field($model, 'avatar')->widget(FileInput::classname(), [ 'options' => ['accept' => 'image/*'], ]); // 多图上传示例 echo '<label class="control-label">Add Attachments</label>'; echo FileInput::widget([ 'model' => $model, 'attribute' => 'attachment_1[]', 'options' => ['multiple' => true] ]); // 不绑定model的使用方法 echo '<label class="control-label">Upload Document</label>'; echo FileInput::widget([ 'name' => 'attachment_3', ]); // 不可点击的示例 echo '<label class="control-label">Select Attachment</label>'; echo FileInput::widget([ 'name' => 'attachment_4', 'disabled' => true ]);
そして、これらは一般的な操作です。想像してみましょう。タオバオで商品の追加が完了すると、1 対多の関係で複数の写真が含まれる商品テーブルが作成されます。このとき、マルチ写真アップロード機能を使用する必要があります。また、画像を非同期でアップロードしたいので、次のように fileInput コンポーネントを構成できます。
<?= $form->field($model, 'image[]')->label($label)->widget(FileInput::classname(), [
// 'name' => 'ImgSelect',
'language' => 'zh-CN',
'options' => ['multiple' => true, 'accept' => 'image/*'],
'pluginOptions' => [
'initialPreview' => $initialPreview,
'initialPreviewConfig' => $initialPreviewConfig,
'allowedPreviewTypes' => ['image'],
'allowedFileExtensions' => ['jpg', 'gif', 'png'],
'previewFileType' => 'image',
'overwriteInitial' => false,
'browseLabel' => '选择图片',
'msgFilesTooMany' => "选择上传的图片数量({n}) 超过允许的最大图片数{m}！",
'maxFileCount' => 5,//允许上传最多的图片5张
'maxFileSize' => 2048,//限制图片最大200kB
'uploadUrl' => Url::to(['/upload/image']),
//'uploadExtraData' => ['testid' => 'listimg'],
'uploadAsync' => true,//配置异步上传还是同步上传
],
'pluginEvents' => [
'filepredelete' => "function(event, key) {
return (!confirm('确认要删除'));
}",
'fileuploaded' => 'function(event, data, previewId, index) {
$(event.currentTarget.closest("form")).append(data.response.imgfile);
}',
'filedeleted' => 'function(event, key) {
$(event.currentTarget.closest("form")).find("#"+key).remove();
return;
}',
]
]); ?>画像閲覧構成をコントローラーで構成し、それを渡します。で。コードの主要なポイントに構成を追加しました。アップロード/画像コントローラーに非同期アップロード URL が構成されており、削除、アップロード、その他の操作が完了したときの js も追加されています。
上で述べたように、FileInput コンポーネントの基本的なプロパティと設定をいくつかリストしました。必要に応じて、プロパティの詳細な説明についてドキュメントを確認してください。
画像をアップロードするコントローラーで actionImage 関数をどのように記述するかを見てください。
/**
* 上传图片到临时目录
* @return string
* @throws \yii\base\Exception
*/
public function actionImage()
{
if (Yii::$app->request->isPost) {
$res = [];
$initialPreview = [];
$initialPreviewConfig = [];
$images = UploadedFile::getInstancesByName("UploadImage[image]");
if (count($images) > 0) {
foreach ($images as $key => $image) {
if ($image->size > 2048 * 1024) {
$res = ['error' => '图片最大不可超过2M'];
return json_encode($res);
}
if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
$res = ['error' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
return json_encode($res);
}
$dir = '/uploads/temp/';
//生成唯一uuid用来保存到服务器上图片名称
$pickey = ToolExtend::genuuid();
$filename = $pickey . '.' . $image->getExtension();
//如果文件夹不存在，则新建文件夹
if (!file_exists(Yii::getAlias('@backend') . '/web' . $dir)) {
FileHelper::createDirectory(Yii::getAlias('@backend') . '/web' . $dir, 777);
}
$filepath = realpath(Yii::getAlias('@backend') . '/web' . $dir) . '/';
$file = $filepath . $filename;
if ($image->saveAs($file)) {
$imgpath = $dir . $filename;
/*Image::thumbnail($file, 100, 100)
->save($file . '_100x100.jpg', ['quality' => 80]);
*/
// array_push($initialPreview, "<img src='" . $imgpath . "' class='file-preview-image' alt='" . $filename . "' title='" . $filename . "'>");
$config = [
'caption' => $filename,
'width' => '120px',
'url' => '../upload/delete', // server delete action
'key' => $pickey,
'extra' => ['filename' => $filename]
];
array_push($initialPreviewConfig, $config);
$res = [
"initialPreview" => $initialPreview,
"initialPreviewConfig" => $initialPreviewConfig,
"imgfile" => "<input name='image[]' id='" . $pickey . "' type='hidden' value='" . $imgpath . "'/>",
'filename' => $filename,
'imagePath' => $imgpath,
];
}
}
}
return json_encode($res);
}
}これで、複数の画像をアップロードする作業が完了しました。それは完璧です。
写真の削除効果を実現するには、最初に 2 枚の写真をアップロードします。単一の画像または複数の画像をアップロードできます。
アップロードが成功したら、現在のページを更新できます。最初からコントローラーに画像プレビューを実装しているため、アップロードした 2 つの画像が表示されるはずです。
削除機能の詳細については説明しませんが、ブラウザで削除する URL を設定するだけで、同じ操作が行われます。
概要
上記は、エディターが紹介した yii2 マルチ画像アップロード コンポーネントの使用方法のチュートリアルです。参考になれば幸いです。皆様、ご質問がございましたら、メッセージを残してください。編集者が時間内に返信させていただきます。スクリプト ハウス Web サイトをサポートしてくださった皆様にも感謝いたします。
#興味があるかもしれない記事:ユーザー ログイン用の PHP ケース コード php の例
以上がyii2 マルチイメージ アップロード コンポーネントの使用法チュートリアル PHP の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
