未加星标

yii2多图上传组件的使用教程

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

最近在使用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多图上传组件的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


您可能感兴趣的文章:Yii2组件之多图上传插件FileInput的详细使用教程yii2.0使用Plupload实现带缩放功能的多图上传Yii2使用自带的UploadedFile实现的文件上传Yii2实现ajax上传图片插件用法yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

tags: gt,上传,image,label,filename,图片,FileInput,lt,多图,yii2,echo,res,widget,return
分页:12
转载请注明
本文标题:yii2多图上传组件的使用教程
本站链接:http://www.codesec.net/view/576891.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(49)