介绍 use 8月\ FileInput \小部件//,趁机& # 39;use kartikile \ fileinput # 39;, if 你have only installed yii2-widget-fileinput 拷贝隔离//,使用ActiveForm 和,模型绑定的单张图片示例
echo 形成→美元字段(模型中,美元,& # 39;《阿凡达》# 39;)→部件(FileInput::类名(),(
& # 39;才能选择# 39;,=祝辞,[& # 39;接受# 39;,=祝辞,& # 39;图像/* & # 39;],
]);//,多图上传示例
echo & # 39; & lt; label 类=癱ontrol-label"祝辞Add Attachments & # 39;;
echo FileInput::小部件([
& # 39;才能模型# 39;,=祝辞,元模型,
& # 39;才能属性# 39;,=祝辞,& # 39;attachment_1 [] & # 39;,
& # 39;才能选择# 39;,=祝辞,[& # 39;多个# 39;,=祝辞,真的)
]);//,不绑定模型的使用方法
echo & # 39; & lt; label 类=癱ontrol-label"祝辞Upload Document & # 39;;
echo FileInput::小部件([
& # 39;才能名字# 39;,=祝辞,& # 39;attachment_3& # 39;
]);//,不可点击的示例
echo & # 39; & lt; label 类=癱ontrol-label"祝辞Select Attachment & # 39;;
echo FileInput::小部件([
& # 39;才能名字# 39;,=祝辞,& # 39;attachment_4& # 39;
& # 39;才能禁用# 39;,=祝辞,真的
]); & lt; ?=,美元形式→字段(模型中,美元,& # 39;图像[]& # 39;)→标签(标签美元)→部件(fileInput::类名(),(//才能,& # 39;名字# 39;,=祝辞,& # 39;ImgSelect& # 39;
& # 39;才能语言# 39;,=祝辞,& # 39;应用# 39;,,
& # 39;才能选择# 39;,=祝辞,[& # 39;多个# 39;,=祝辞,真的,,& # 39;接受# 39;,=祝辞,& # 39;图像/* & # 39;),,
& # 39;才能pluginOptions& # 39;,=祝辞,(,
,,,& # 39;initialPreview& # 39;,=祝辞,initialPreview美元,,
,,,& # 39;initialPreviewConfig& # 39;,=祝辞,initialPreviewConfig美元,,
,,,& # 39;allowedPreviewTypes& # 39;,=祝辞,[& # 39;图像# 39;),,
,,,& # 39;allowedFileExtensions& # 39;,=祝辞,[& # 39;jpg # 39;,, & # 39; gif # 39;,, & # 39; png # 39;),,
,,,& # 39;previewFileType& # 39;,=祝辞,& # 39;图像# 39;,,
,,,& # 39;overwriteInitial& # 39;,=祝辞,假的,,
,,,& # 39;browseLabel& # 39;,=祝辞,& # 39;选择图片& # 39;,
,,,& # 39;msgFilesTooMany& # 39;,=祝辞,“选择上传的图片数量({n}),超过允许的最大图片数{m} !“,,
,,,& # 39;maxFileCount& # 39;,=祝辞,5//允许上传最多的图片5张,
,,,& # 39;maxFileSize& # 39;,=祝辞,2048年,//限制图片最大200 kb
,,,& # 39;uploadUrl& # 39;,=祝辞,Url::,((& # 39;/上传/图像# 39;]),
,,,//& # 39;uploadExtraData& # 39;,=祝辞,[& # 39;testid& # 39;,=祝辞,& # 39;listimg& # 39;),,
,,,& # 39;uploadAsync& # 39;,=祝辞,真的,//配置异步上传还是同步上传,
,,,
& # 39;才能pluginEvents& # 39;,=祝辞,(,
,,,& # 39;filepredelete& # 39;,=祝辞,“函数(事件,,键),{,
,,,,,,,return (!确认(& # 39;确认要删除& # 39;)),,
,,,,,},,,
,,,& # 39;fileuploaded& # 39;,=祝辞,& # 39;功能(数据、事件,还以为,previewId,指数),{,
,,,,,,,美元(event.currentTarget.closest (“form")) .append (data.response.imgfile);
,,,,,,,}& # 39;
,,,& # 39;filedeleted& # 39;,=祝辞,& # 39;函数(事件,,键),{,
,,,,,,,美元(event.currentTarget.closest (“form"));(“#“+键).remove (),,
,,,,,,,返回;
,,,,,,,}& # 39;
,,)
]);,?在 /* *,
*,才能上传图片到临时目录,
*,才能@return string
*,才能@throws \ yii \ \ Exception 基地;
*/才能,
,public function actionImage (),
{大敌;
,,if (Yii:应用程序→美元请求→isPost), {,
,,,,res 美元;=,[];,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
本篇文章为大家展示了如何使用yii2多图上传组件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
yii2-widget-fileinput这个库的github地址在这里,安装的部分就很常规了,按文档走就可以了。
我们来看官方文档展示的几个常规操作:
而这些都是常规操作,我们来设想一下,我们要完成淘宝的商品添加,有个商品表,有着一对多关系的若干张图片,这时候就需要用到多图上传功能了。而且我们还希望上传图片是异步的,那么我们可以这么配置我们的fileInput组件
我们在控制器配置好图片浏览的配置,传入进来。代码里的关键点我已经加上了配置,我们可以看的到,这时异步上传的url已经配置到了上传/形象这个控制器里,而我们也在删除,上传等操作完成时加上了js的回调。
如上所述,我们罗列了一些都是组件FileInput的基本属性和设置,如有所需,可查看文档看属性的详细说明。
看下上传图片的控制器里,我们是怎么写actionImage这个函数的
