这篇文章主要介绍了关于yii2多图上传组件的使用,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
最近在使用yii2开发一个表单页面的时候,有多图上传的需求,稍微找了找这方面的组件,基本都安利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 ]);
而这些都是常规操作,我们来设想一下,我们要完成淘宝的商品添加,有个商品表,有着一对多关系的若干张图片,这时候就需要用到多图上传功能了。而且我们还希望上传图片是异步的,那么我们可以这么配置我们的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已经配置到了 upload/image 这个控制器里,而我们也在删除,上传等操作完成时加上了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); } }
到此,多图上传的工作我们也就完美的实现了。
为了实现图片的删除效果,这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面,因为一开始我们就在controller中实现了图片的预览工作,所以理应会展示我们已经上传的两张图片。
至于删除函数就不讲了,只要在浏览里配置上删除的url,也是一样的操作咯。
相关推荐:
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片
以上是yii2多图上传组件的使用的详细内容。更多信息请关注PHP中文网其他相关文章!

PHPSession失效的原因包括配置错误、Cookie问题和Session过期。1.配置错误:检查并设置正确的session.save_path。2.Cookie问题:确保Cookie设置正确。3.Session过期:调整session.gc_maxlifetime值以延长会话时间。

在PHP中调试会话问题的方法包括:1.检查会话是否正确启动;2.验证会话ID的传递;3.检查会话数据的存储和读取;4.查看服务器配置。通过输出会话ID和数据、查看会话文件内容等方法,可以有效诊断和解决会话相关的问题。

多次调用session_start()会导致警告信息和可能的数据覆盖。1)PHP会发出警告,提示session已启动。2)可能导致session数据意外覆盖。3)使用session_status()检查session状态,避免重复调用。

在PHP中配置会话生命周期可以通过设置session.gc_maxlifetime和session.cookie_lifetime来实现。1)session.gc_maxlifetime控制服务器端会话数据的存活时间,2)session.cookie_lifetime控制客户端cookie的生命周期,设置为0时cookie在浏览器关闭时过期。

使用数据库存储会话的主要优势包括持久性、可扩展性和安全性。1.持久性:即使服务器重启,会话数据也能保持不变。2.可扩展性:适用于分布式系统,确保会话数据在多服务器间同步。3.安全性:数据库提供加密存储,保护敏感信息。

在PHP中实现自定义会话处理可以通过实现SessionHandlerInterface接口来完成。具体步骤包括:1)创建实现SessionHandlerInterface的类,如CustomSessionHandler;2)重写接口中的方法(如open,close,read,write,destroy,gc)来定义会话数据的生命周期和存储方式;3)在PHP脚本中注册自定义会话处理器并启动会话。这样可以将数据存储在MySQL、Redis等介质中,提升性能、安全性和可扩展性。

SessionID是网络应用程序中用来跟踪用户会话状态的机制。1.它是一个随机生成的字符串,用于在用户与服务器之间的多次交互中保持用户的身份信息。2.服务器生成并通过cookie或URL参数发送给客户端,帮助在用户的多次请求中识别和关联这些请求。3.生成通常使用随机算法保证唯一性和不可预测性。4.在实际开发中,可以使用内存数据库如Redis来存储session数据,提升性能和安全性。

在无状态环境如API中管理会话可以通过使用JWT或cookies来实现。1.JWT适合无状态和可扩展性,但大数据时体积大。2.Cookies更传统且易实现,但需谨慎配置以确保安全性。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载
最流行的的开源编辑器