Yii2组件之多图上传插件FileInput的详细使用教程,yii2fileinput
在前面给大家写个有关文件上传的文章,包括最基本的yii2文件上传、异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美。
今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便;二来嘛,用这个插件不仅添加的时候好操作,修改的时候也可以直接通过异步的方式将图片悄无声息的删掉;最值得一提的是,界面效果融合了bootstrap,清爽简洁美观,看起来舒服。
说重点,看具体步骤
首先还是先安装组件
复制代码 代码如下:
composer require kartik-v/yii2-widget-fileinput "@dev"
先做一个必要的说明:假设我们有一张商品表,一张商品图片表,商品图片表只对商品id和图片地址进行存储
看基本使用
use kartik\file\FileInput; // 非ActiveForm的表单 echo '<label class="control-label">图片</label>'; echo FileInput::widget([ 'model' => $model, 'attribute' => 'image[]', 'options' => ['multiple' => true] ]); //使用ActiveForm的表单 echo $form->field($model, 'image[]')->widget(FileInput::classname(), [ 'options' => ['multiple' => true], ]);
上面上传多图,只需要设置multiple=true即可,记得选择图片的时候多选。
如此一来,图片选择好了直接提交表单就好,文件上传的程序需要自行处理,如果你还没有实现,可以参考文件上传的基本操作。
多图上传的唯一麻烦就是,修改的时候怎么才方便?不着急,FileInput都帮我们解决了!
我们看编辑的时候图片的展示以及如何异步的删除单个或者多个图片!
// 视图文件 use kartik\file\FileInput; <?php $form = ActiveForm::begin([ 'options' => ['enctype'=>'multipart/form-data'], ]); ?> <?php echo $form->field($model, 'banner_url[]')->label('banner图')->widget(FileInput::classname(), [ 'options' => ['multiple' => true], 'pluginOptions' => [ // 需要预览的文件格式 'previewFileType' => 'image', // 预览的文件 'initialPreview' => ['图片1', '图片2', '图片3'], // 需要展示的图片设置,比如图片的宽度等 'initialPreviewConfig' => ['width' => '120px'], // 是否展示预览图 'initialPreviewAsData' => true, // 异步上传的接口地址设置 'uploadUrl' => Url::toRoute(['/goods/async-image']), // 异步上传需要携带的其他参数,比如商品id等 'uploadExtraData' => [ 'goods_id' => $id, ], 'uploadAsync' => true, // 最少上传的文件个数限制 'minFileCount' => 1, // 最多上传的文件个数限制 'maxFileCount' => 10, // 是否显示移除按钮,指input上面的移除按钮,非具体图片上的移除按钮 'showRemove' => true, // 是否显示上传按钮,指input上面的上传按钮,非具体图片上的上传按钮 'showUpload' => true, //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮 'showBrowse' => true, // 展示图片区域是否可点击选择多文件 'browseOnZoneClick' => true, // 如果要设置具体图片上的移除、上传和展示按钮,需要设置该选项 'fileActionSettings' => [ // 设置具体图片的查看属性为false,默认为true 'showZoom' => false, // 设置具体图片的上传属性为true,默认为true 'showUpload' => true, // 设置具体图片的移除属性为true,默认为true 'showRemove' => true, ], ], // 一些事件行为 'pluginEvents' => [ // 上传成功后的回调方法,需要的可查看data后再做具体操作,一般不需要设置 "fileuploaded" => "function (event, data, id, index) { console.log(data); }", ], ]); ?> <?php ActiveForm::end(); ?>
如上所述,基本上都是组件 FileInput的基本属性和设置,我们这里也仅仅罗列了一些常用的属性介绍,如有所需,可查看文档看属性的详细说明。
按照如上所配置,我们预览下效果图
感觉上效果很是可以,在开始写php代码实现之前,我们先在controller中实现 initialPreview和 initialPreviewConfig的配置
假设上面的视图文件是用户展示商品图片的详情页,当前controller是指渲染视图文件的controller,则需要在controller中获取商品关联的图片,用于展示或者说用于商品图片的删除\新增操作。
// 假设商品的图片是 $relationBanners,$id是商品的id // $relationBanners的数据结构如: /** * Array *( * [0] => Array * ( * [id] => 1484314 * [goods_id] => 1173376 * [banner_url] => ./uploads/20160617/146612713857635322241f2.png * ) * *) */ $relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all(); // 对商品banner图进行处理 $p1 = $p2 = []; if ($relationBanners) { foreach ($relationBanners as $k => $v) { $p1[$k] = $v['banner_url']; $p2[$k] = [ 'url' => Url::toRoute('/banner/delete'), 'key' => $v['id'], ]; } } $model = new Banner; return $this->render('banner', [ 'model' => $model, 'p1' => $p1, 'p2' => $p2, 'id' => $id ]);
你可以看到p1是图片地址的集合,这里用于赋值给initialPreview
p2是一组url和key的集合,这里用于赋值给initialPreviewConfig
其中url是移除图片的请求地址
key是每个图片对应的id
此时我们视图文件中的pluginOptions应该是这样的
'pluginOptions' => [ // other code 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, // other code ],
注意设置initialPreviewAsData为true哦,不然等会创建图片后,预览图不会显示。
我们在一开始配置文件中配置了uploadUrl,该参数是异步上传的图片地址。
现在看上传界面应该是光秃秃的,我们选择一张图片后效果如上图2所示,
需要提醒的是,每张小图片上的上传是上传对应的小图片,input框(右下角)的上传和移除都是针对所有的图片的操作,一张也是上传,十张也是上传,我们这里只对多图上传的操作做一个必要的说明。
图片上传的地址以及上传需要的额外参数(如商品id)我们都准备好了,额外的参数配置项是uploadExtraData,具体见上面视图文件中的配置。
接着我们看 /goods/async-image 异步上传的程序实现
public function actionAsyncImage () { // 商品ID $id = Yii::$app->request->post('goods_id'); $p1 = $p2 = []; if (empty($_FILES['Banner']['name']) || empty($_FILES['Banner']['name']['banner_url']) || !$id) { echo '{}'; return; } for ($i = 0; $i < count($_FILES['Banner']['name']['banner_url']); $i++) { $url = '/banner/delete'; $imageUrl = ''; //调用图片接口上传后返回图片地址 // 图片入库操作,此处不可以批量直接入库,因为后面我们还要把key返回 便于图片的删除 $model = new Banner; $model->goods_id = $id; $model->banner_url = $imageUrl; $key = 0; if ($model->save(false)) { $key = $model->id; } // $pathinfo = pathinfo($imageUrl); // $caption = $pathinfo['basename']; // $size = $_FILES['Banner']['size']['banner_url'][$i]; $p1[$i] = $imageUrl; $p2[$i] = ['url' => $url, 'key' => $key]; } echo json_encode([ 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, 'append' => true, ]); return; }
到此,单图和多图上传的工作我们也就完成了。
为了实现图片的删除效果,这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面,因为一开始我们就在controller中实现了图片的预览工作,所以理应会展示我们已经上传的两张图片。
按照我们的配置,现在的预览图应该是这样的。
不说废话,我们看图片删除的程序(/banner/delete)实现
public function actionDelete () { if ($id = Yii::$app->request->post('key')) { $model = $this->findModel($id); $model->delete(); } Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; return ['success' => true]; }
需要提醒的是,key就是我们配置 initialPreviewConfig项时指定的key,你可以参考controller中的key,也可以参考异步上传成功后p2的key.
到此,yii2中多图上传的组件使用以及程序代码我们都给出了具体的实现。
以上所述是小编给大家介绍的Yii2组件之多图上传插件FileInput的详细使用教程的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

Vue是目前最流行的前端框架之一,而VUE3则是Vue框架的最新版本,相较于VUE2,VUE3具备了更高的性能和更出色的开发体验,成为了众多开发者的首选。在VUE3中,使用extends继承组件是一个非常实用的开发方式,本文将为大家介绍如何使用extends继承组件。extends是什么?在Vue中,extends是一个非常实用的属性,它可以用于子组件继承父

Vue怎么通过JSX动态渲染组件?下面本篇文章给大家介绍一下Vue高效通过JSX动态渲染组件的方法,希望对大家有所帮助!

在VSCode中开发Vue/React组件时,怎么实时预览组件?本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件,希望对大家有所帮助!

yii2去掉jquery的方法:1、编辑AppAsset.php文件,注释掉变量$depends里的“yii\web\YiiAsset”值;2、编辑main.php文件,在字段“components”下面添加配置为“'yii\web\JqueryAsset' => ['js' => [],'sourcePath' => null,],”即可去掉jquery脚本。

VUE3开发入门教程:使用组件实现分页分页是一个常见的需求,因为在实际开发中,我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中,可以通过使用组件实现分页功能,本文将介绍如何使用组件实现简单的分页功能。1.创建组件首先,我们需要创建一个分页组件,使用“vuecreate”命令创建VUE项目,并在src/components目录下创建Pagin

在现代Web开发中,组件化是一个极受欢迎的开发模式。而Vue.js则是一个非常适合组件化的前端框架。在这篇文章中,我们将介绍如何使用Vue.js创建一个仿照片墙组件。在开始之前,我们需要明确一些准备工作。首先,我们需要安装Vue.js。安装的方法非常简单,只需在终端中输入以下命令:npminstallvue安装完成后,我们可以创建一个名为

Vue.js是一款流行的前端JavaScript框架,它提供了一种简单易用的方式来构建动态网页应用程序。Vue.js的主要特点是其模块化的设计和可插拔的组件系统。这使得开发者可以轻松地创建可复用的组件,从而提高了应用程序的重用性和可维护性。在本文中,我们将重点介绍VUE3初学者如何使用Vue.js组件组合实现可复用组合。Vue.js组件是一个完整的封装元素,

Vue是一款优秀的前端框架,在处理大量数据时,分页组件是必不可少的。分页组件可以使页面更加整洁,同时也可以提高用户体验。在Vue中,实现一个分页组件并不复杂,本文将介绍Vue如何实现分页组件。一、需求分析在实现分页组件前,我们需要对需求进行分析。一个基本的分页组件需要具有以下功能:展示当前页数、总页数以及每页展示条数点击分页按钮可以切换至不同页数展示当前页


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Dreamweaver CS6
Alat pembangunan web visual

SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
