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

内容导读

收集整理的这篇技术教程文章主要介绍了yii2多图上传组件的使用教程php实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5263字，纯文字阅读大概需要8分钟。

内容图文

这篇文章主要介绍了yii2多图上传组件的使用教程，在使用过程中有许多注意要点，下面小编给大家分享到脚本之家平台,需要的朋友可以参考下

最近在使用yii2开发一个表单页面的时候，有多图上传的需求，稍微找了找这方面的组件，基本都安利fileInput这个组件，于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中发现还是有不少小细节需要注意的，于是记录一下使用的过程。

yii2-widget-fileinput 这个库的github地址在这里，安装的部分就很常规了，按文档走就可以了。

我们来看官方文档展示的几个常规操作：

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

您可能感兴趣的文章:

PHP实现用户登录的案例代码php实例

ThinkPHP防止重复提交表单的方法实例分析php实例

PHP分页显示的方法分析【附PHP通用分页类php技巧

以上就是yii2多图上传组件的使用教程php实例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是为您收集整理的yii2多图上传组件的使用教程php实例全部内容，希望文章能够帮你解决yii2多图上传组件的使用教程php实例所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。